@saasquatch/mint-components 1.5.1-1 → 1.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasquatch/mint-components",
-  "version": "1.5.1-1",
+  "version": "1.5.1",
   "description": "Mint Components - Built with Shoelace Components",
   "main": "dist/index.cjs.js",
   "es2015": "dist/esm/index.js",

package/dist/collection/components/sqm-country-field/UseCountryField.stories.js

@@ -1,91 +0,0 @@
-import { setUserIdentity } from "@saasquatch/component-boilerplate";
-import { useEffect } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
-export default {
-  title: "Hooks / useCountryField",
-};
-function setupGraphQL({ token, id }) {
-  const accountId = id;
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-  };
-  useEffect(() => {
-    setUserIdentity({
-      accountId,
-      id,
-      jwt: token,
-    });
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return { id, accountId };
-}
-export const Default = createHookStory(() => {
-  setupGraphQL({
-    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoibm9sb2NhbGUiLCJhY2NvdW50SWQiOiJub2xvY2FsZSJ9fQ.ACri_gO_eIdNfh3ifMmbbDp7gZz3yjT_8mfiQ96T-BY",
-    id: "nolocale",
-  });
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData" })));
-});
-export const English = createHookStory(() => {
-  setupGraphQL({
-    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWVuZ2xpc2giLCJpZCI6InNhbWVuZ2xpc2gifX0._6OTVF3gcipu_ibgthUNr5UHwC-2E_lhCENI5HpYvcw",
-    id: "samenglish",
-  });
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData" })));
-});
-export const French = createHookStory(() => {
-  setupGraphQL({
-    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbWZyZW5jaCIsImlkIjoic2FtZnJlbmNoIn19.cwhasHpfU5MLV4vGbCQcazb6p19iSw5pD2zyrVHgePg",
-    id: "samfrench",
-  });
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData" })));
-});
-export const Turkish = createHookStory(() => {
-  setupGraphQL({
-    token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InNhbXR1cmtleSIsImlkIjoic2FtdHVya2V5In19.usSMe0RWg8W5FtwcvJayvAlxTw6vMxjTyWXaP8jI8_U",
-    id: "samturkey",
-  });
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData" })));
-});
-export const NoUser = createHookStory(() => {
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-  };
-  useEffect(() => {
-    setUserIdentity(undefined);
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData" })));
-});
-export const NoUserFrench = createHookStory(() => {
-  //@ts-ignore
-  window.widgetIdent = {
-    tenantAlias: "test_a74miwdpofztj",
-    appDomain: "https://staging.referralsaasquatch.com",
-  };
-  useEffect(() => {
-    setUserIdentity(undefined);
-    return () => {
-      window.widgetIdent = undefined;
-      setUserIdentity(undefined);
-    };
-  }, []);
-  return (h("sqm-portal-register", null,
-    h("sqm-country-field", { slot: "formData", locale: "fr" })));
-});

package/dist/collection/components/sqm-country-field/sqm-country-field-view.js

@@ -1,47 +0,0 @@
-import { h } from "@stencil/core";
-import jss from "jss";
-import preset from "jss-preset-default";
-const style = {
-  ErrorStyle: {
-    "--sl-input-border-color": "var(--sl-color-danger-500)",
-    "--sl-input-background-color": "var(--sl-color-danger-10)",
-    "--sl-input-border-color-focus": "var(--sl-color-danger-500)",
-    "--sl-input-border-color-hover": "var(--sl-color-danger-500)",
-  },
-  ErrorMessageStyle: {
-    margin: 0,
-    color: "var(--sl-color-danger-500)",
-    fontSize: "var(--sl-input-help-text-font-size-medium)",
-  },
-  FieldContainer: {
-    "margin-bottom": "var(--sl-spacing-large)",
-  },
-};
-const vanillaStyle = `
-:host {
-  margin: 0 auto;
-  width: 100%;
-  display: block;
-}
-sl-select::part(label){
-  font-size: var(--sl-input-label-font-size-small);
-  font-weight: var(--sl-font-weight-semibold);
-}
-`;
-jss.setup(preset());
-const sheet = jss.createStyleSheet(style);
-const styleString = sheet.toString();
-export function CountryFieldView(props) {
-  var _a;
-  const { states, content, data } = props;
-  const validationErrors = states === null || states === void 0 ? void 0 : states.validationErrors;
-  return (h("div", { class: sheet.classes.FieldContainer },
-    h("style", { type: "text/css" },
-      vanillaStyle,
-      styleString),
-    h("sl-select", Object.assign({ exportparts: "label: input-label", label: content.dropdownLabel, name: `/${content.dropdownName}` }, (content.dropdownRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) ? {
-      class: sheet.classes.ErrorStyle,
-    }
-      : [])), (_a = data.countries) === null || _a === void 0 ? void 0 : _a.map((country) => (h("sl-menu-item", { value: country.displayName }, country.displayName)))),
-    (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.dropdownName]) && (h("p", { class: sheet.classes.ErrorMessageStyle }, content.errorMessage))));
-}

package/dist/collection/components/sqm-country-field/sqm-country-field.js

@@ -1,197 +0,0 @@
-import { isDemo } from "@saasquatch/component-boilerplate";
-import { withHooks } from "@saasquatch/stencil-hooks";
-import { Component, h, Prop, State } from "@stencil/core";
-import deepmerge from "deepmerge";
-import { getProps } from "../../utils/utils";
-import { useDropdownField } from "../sqm-dropdown-field/useDropdownField";
-import { CountryFieldView, } from "./sqm-country-field-view";
-import { useCountryField } from "./useCountryField";
-/**
- * @uiName Country Field
- */
-export class CountryField {
-  constructor() {
-    this.ignored = true;
-    /**
-     * @uiName Country name attribute
-     */
-    this.dropdownName = "countryCode";
-    /**
-     * @uiName Country Dropdown label
-     */
-    this.dropdownLabel = "Country";
-    /**
-     * @uiName Unselected error message
-     */
-    this.errorMessage = "Must select a country";
-    /**
-     * @uiName Required
-     */
-    this.dropdownRequired = true;
-    /**
-     * @uiName Country name locale override
-     */
-    this.locale = null;
-    withHooks(this);
-  }
-  disconnectedCallback() { }
-  render() {
-    const content = {
-      ...getProps(this),
-      selectOptions: h("slot", null),
-    };
-    const { states } = useDropdownField();
-    const { data } = isDemo()
-      ? useCountryFieldDemo(this)
-      : useCountryField(this);
-    return (h(CountryFieldView, { states: states, content: content, data: data }));
-  }
-  static get is() { return "sqm-country-field"; }
-  static get properties() { return {
-    "dropdownName": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Country name attribute",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "dropdown-name",
-      "reflect": false,
-      "defaultValue": "\"countryCode\""
-    },
-    "dropdownLabel": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Country Dropdown label",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "dropdown-label",
-      "reflect": false,
-      "defaultValue": "\"Country\""
-    },
-    "errorMessage": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Unselected error message",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "error-message",
-      "reflect": false,
-      "defaultValue": "\"Must select a country\""
-    },
-    "dropdownRequired": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": "Required",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "dropdown-required",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "locale": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string | null",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [{
-            "text": "Country name locale override",
-            "name": "uiName"
-          }],
-        "text": ""
-      },
-      "attribute": "locale",
-      "reflect": false,
-      "defaultValue": "null"
-    },
-    "demoData": {
-      "type": "unknown",
-      "mutable": false,
-      "complexType": {
-        "original": "DemoData<CountryFieldViewProps>",
-        "resolved": "{ states?: { validationErrors?: Record<string, string>; }; content?: { dropdownName: string; dropdownLabel: string; dropdownRequired?: boolean; errorMessage: string; selectOptions?: VNode | VNode[]; }; data?: { countries: Country[]; }; }",
-        "references": {
-          "DemoData": {
-            "location": "import",
-            "path": "../../global/demo"
-          },
-          "CountryFieldViewProps": {
-            "location": "import",
-            "path": "./sqm-country-field-view"
-          }
-        }
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [{
-            "text": undefined,
-            "name": "undocumented"
-          }],
-        "text": ""
-      }
-    }
-  }; }
-  static get states() { return {
-    "ignored": {}
-  }; }
-}
-function useCountryFieldDemo(props) {
-  return deepmerge({
-    states: {
-      validationErrors: [],
-    },
-    data: {
-      countries: [],
-    },
-  }, props.demoData || {}, { arrayMerge: (_, a) => a });
-}

package/dist/collection/components/sqm-country-field/useCountryField.js

@@ -1,23 +0,0 @@
-import { useLocale, useQuery, useUserIdentity, } from "@saasquatch/component-boilerplate";
-import { gql } from "graphql-request";
-const GET_COUNTRIES = gql `
-  query countryList($locale: RSLocale) {
-    countries(limit: 250) {
-      data {
-        countryCode
-        displayName(locale: $locale)
-      }
-    }
-  }
-`;
-export function useCountryField(props) {
-  var _a;
-  const user = useUserIdentity();
-  const locale = props.locale || useLocale();
-  const { data: res } = useQuery(GET_COUNTRIES, { locale }, user && locale === undefined);
-  return {
-    data: {
-      countries: (_a = res === null || res === void 0 ? void 0 : res.countries) === null || _a === void 0 ? void 0 : _a.data,
-    },
-  };
-}