@saasquatch/mint-components 1.5.2 → 1.5.3-0

package/dist/collection/collection-manifest.json

@@ -18,6 +18,7 @@
     "./components/sqm-hero-image/sqm-hero-image.js",
     "./components/sqm-hook-story-container/sqm-hook-story-container.js",
     "./components/sqm-image/sqm-image.js",
+    "./components/sqm-input-field/sqm-input-field.js",
     "./components/sqm-leaderboard/sqm-leaderboard.js",
     "./components/sqm-leaderboard-rank/sqm-leaderboard-rank.js",
     "./components/sqm-name-fields/sqm-name-fields.js",

package/dist/collection/components/sqm-hero/Hero.stories.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { HeroView } from "./sqm-hero-view";
 import scenario from "../sqm-hero/sqm-hero.feature";
 export default {
-  title: "Hero Layout",
+  title: "Components/Hero Layout",
   parameters: {
     scenario,
   },

package/dist/collection/components/sqm-input-field/InputField.stories.js

@@ -0,0 +1,88 @@
+import { h } from "@stencil/core";
+import { PortalRegisterView, } from "../sqm-portal-register/sqm-portal-register-view";
+import { InputFieldView } from "./sqm-input-field-view";
+import scenario from "./sqm-input-field.feature";
+export default {
+  title: "Components/Input Field",
+  parameters: {
+    scenario,
+  },
+};
+const defaultProps = {
+  states: {
+    validationErrors: {},
+  },
+  content: {
+    fieldName: "field",
+    fieldLabel: "My Custom Input",
+    fieldType: "text",
+    fieldRequired: true,
+    errorMessage: "Cannot be empty",
+  },
+};
+const defaultRegisterProps = {
+  states: {
+    error: "",
+    loading: false,
+    confirmPassword: true,
+    hideInputs: false,
+    loginPath: "/login",
+  },
+  callbacks: {
+    submit: () => console.log("Submit!"),
+    inputFunction: () => { },
+  },
+  refs: {
+    formRef: {},
+  },
+  content: { pageLabel: "Register", confirmPasswordLabel: "Confirm Password" },
+};
+export const Default = () => h(InputFieldView, Object.assign({}, defaultProps));
+export const CustomLabel = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: { ...defaultProps.content, fieldLabel: "My Label" } })));
+export const Error = () => (h(InputFieldView, Object.assign({}, defaultProps, { states: {
+    ...defaultProps.states,
+    validationErrors: {
+      field: "Cannot be empty",
+    },
+  } })));
+export const CustomError = () => (h(InputFieldView, Object.assign({}, defaultProps, { content: {
+    ...defaultProps.content,
+    errorMessage: "A value must be entered to continue",
+  }, states: {
+    ...defaultProps.states,
+    validationErrors: {
+      field: "Cannot be empty",
+    },
+  } })));
+export const DateType = () => {
+  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
+      ...defaultProps.content,
+      fieldLabel: "Date",
+      fieldType: "date",
+    } })));
+};
+export const NumberType = () => {
+  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
+      ...defaultProps.content,
+      fieldLabel: "Number",
+      fieldType: "number",
+    } })));
+};
+export const TelType = () => {
+  return (h(InputFieldView, Object.assign({}, defaultProps, { content: {
+      ...defaultProps.content,
+      fieldLabel: "Phone Number",
+      fieldType: "tel",
+    } })));
+};
+export const RegistrationField = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { content: {
+    ...defaultRegisterProps.content,
+    formData: h(InputFieldView, Object.assign({}, defaultProps)),
+  } })));
+export const RegistrationFieldCustomLabel = () => (h(PortalRegisterView, Object.assign({}, defaultRegisterProps, { content: {
+    ...defaultRegisterProps.content,
+    formData: (h(InputFieldView, Object.assign({}, defaultProps, { content: {
+        ...defaultProps.content,
+        fieldLabel: "Data",
+      } }))),
+  } })));

package/dist/collection/components/sqm-input-field/UseInputField.stories.js

@@ -0,0 +1,77 @@
+import { setUserIdentity } from "@saasquatch/component-boilerplate";
+import { useEffect } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
+import scenario from "./sqm-input-field.feature";
+export default {
+  title: "Hooks / useInputField",
+  parameters: {
+    scenario,
+  },
+};
+function setupGraphQL() {
+  const id = "testestest";
+  const accountId = id;
+  const programId = "sam-partner-test-2";
+  //@ts-ignore
+  window.widgetIdent = {
+    tenantAlias: "test_a8b41jotf8a1v",
+    appDomain: "https://staging.referralsaasquatch.com",
+    programId,
+  };
+  useEffect(() => {
+    setUserIdentity({
+      accountId,
+      id,
+      jwt: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImFjY291bnRJZCI6InRlc3Rlc3Rlc3QiLCJpZCI6InRlc3Rlc3Rlc3QifX0.qYnU5hNeIj9C_G3NogfG7btgCPGZC7JRXY0MG6a63zs",
+    });
+    return () => {
+      window.widgetIdent = undefined;
+      setUserIdentity(undefined);
+    };
+  }, []);
+  return { id, accountId };
+}
+export const FormData = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "formData" },
+      h("sqm-input-field", { "field-name": "myData" }))));
+});
+export const FormDataWithLabel = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("div", { slot: "formData" },
+      h("sqm-input-field", { "field-label": "Custom Label", "field-name": "myData" }))));
+});
+export const MultipleInputs = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Field One", "field-name": "fieldOne" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Field Two", "field-name": "fieldTwo" })));
+});
+export const OptionalInputs = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Optional Field", "field-required": "false", "field-name": "optionalField" })));
+});
+export const DateType = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Date", "field-name": "date", "field-type": "date" })));
+});
+export const NumberType = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Number", "field-name": "number", "field-type": "number" })));
+});
+export const TelType = createHookStory(() => {
+  setupGraphQL();
+  return (h("sqm-portal-register", null,
+    h("sqm-name-fields", { slot: "formData" }),
+    h("sqm-input-field", { slot: "formData", "field-label": "Phone Number", "field-name": "tel", "field-type": "tel" })));
+});

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

@@ -0,0 +1,41 @@
+import { h } from "@stencil/core";
+import jss from "jss";
+import preset from "jss-preset-default";
+import { ErrorStyles } from "../../global/mixins";
+const style = {
+  ErrorStyle: ErrorStyles,
+  FieldContainer: {
+    "margin-bottom": "var(--sl-spacing-large)",
+  },
+};
+const vanillaStyle = `
+:host {
+  margin: 0 auto;
+  width: 100%;
+  display: block;
+}
+sl-checkbox::part(label){
+  font-size: var(--sl-input-label-font-size-small);
+  font-weight: var(--sl-font-weight-normal);
+  line-height: 20px;
+}
+sl-checkbox::part(base){
+  align-items: start;
+}
+`;
+jss.setup(preset());
+const sheet = jss.createStyleSheet(style);
+const styleString = sheet.toString();
+export function InputFieldView(props) {
+  const { states, content } = 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-input", Object.assign({ exportparts: "label: input-label", name: `/${content.fieldName}`, type: content.fieldType, label: content.fieldLabel }, (content.fieldRequired ? { required: true } : []), ((validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]) ? {
+      class: sheet.classes.ErrorStyle,
+      helpText: content.errorMessage || (validationErrors === null || validationErrors === void 0 ? void 0 : validationErrors[content.fieldName]),
+    }
+      : [])))));
+}

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

@@ -0,0 +1,192 @@
+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 { InputFieldView } from "./sqm-input-field-view";
+import { useInputField } from "./useInputField";
+/**
+ * @uiName Input Field
+ */
+export class InputField {
+  constructor() {
+    this.ignored = true;
+    /**
+     * @uiName Input label
+     */
+    this.fieldLabel = "My Custom Input";
+    /**
+     * @uiName Input Type
+     * @uiType string
+     * @uiEnum ["text", "date",  "number", "tel"]
+     */
+    this.fieldType = "text";
+    /**
+     * @uiName Empty error message
+     */
+    this.errorMessage = "Cannot be empty";
+    /**
+     * @uiName Required
+     */
+    this.fieldRequired = true;
+    withHooks(this);
+  }
+  disconnectedCallback() { }
+  render() {
+    const content = {
+      ...getProps(this),
+    };
+    const { states } = isDemo() ? useInputFieldDemo(this) : useInputField();
+    return h(InputFieldView, { states: states, content: content });
+  }
+  static get is() { return "sqm-input-field"; }
+  static get properties() { return {
+    "fieldName": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input name attribute",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "field-name",
+      "reflect": false
+    },
+    "fieldLabel": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input label",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "field-label",
+      "reflect": false,
+      "defaultValue": "\"My Custom Input\""
+    },
+    "fieldType": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"text\" | \"date\" | \"number\" | \"tel\"",
+        "resolved": "\"date\" | \"number\" | \"tel\" | \"text\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Input Type",
+            "name": "uiName"
+          }, {
+            "text": "string",
+            "name": "uiType"
+          }, {
+            "text": "[\"text\", \"date\",  \"number\", \"tel\"]",
+            "name": "uiEnum"
+          }],
+        "text": ""
+      },
+      "attribute": "field-type",
+      "reflect": false,
+      "defaultValue": "\"text\""
+    },
+    "errorMessage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": "Empty error message",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "error-message",
+      "reflect": false,
+      "defaultValue": "\"Cannot be empty\""
+    },
+    "fieldRequired": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": "Required",
+            "name": "uiName"
+          }],
+        "text": ""
+      },
+      "attribute": "field-required",
+      "reflect": false,
+      "defaultValue": "true"
+    },
+    "demoData": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "DemoData<InputFieldViewProps>",
+        "resolved": "{ states?: { validationErrors?: ValidationErrors; }; content?: { fieldName: string; fieldLabel: string; fieldType: \"number\" | \"text\" | \"date\" | \"tel\"; fieldRequired?: boolean; errorMessage: string; }; }",
+        "references": {
+          "DemoData": {
+            "location": "import",
+            "path": "../../global/demo"
+          },
+          "InputFieldViewProps": {
+            "location": "import",
+            "path": "./sqm-input-field-view"
+          }
+        }
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "undocumented"
+          }],
+        "text": ""
+      }
+    }
+  }; }
+  static get states() { return {
+    "ignored": {}
+  }; }
+}
+function useInputFieldDemo(props) {
+  return deepmerge({
+    states: {
+      validationErrors: [],
+    },
+  }, props.demoData || {}, { arrayMerge: (_, a) => a });
+}

package/dist/collection/components/sqm-input-field/useInputField.js

@@ -0,0 +1,10 @@
+import { useDomContext } from "@saasquatch/stencil-hooks";
+import { FORM_VALIDATION_CONTEXT, } from "../sqm-portal-register/useValidationState";
+export function useInputField() {
+  const validationState = useDomContext(FORM_VALIDATION_CONTEXT);
+  return {
+    states: {
+      validationErrors: validationState === null || validationState === void 0 ? void 0 : validationState.validationErrors,
+    },
+  };
+}

package/dist/collection/components/sqm-name-fields/NameFields.stories.js

@@ -1,8 +1,8 @@
 import { h } from "@stencil/core";
-import { NameFieldsView, } from "./sqm-name-fields-view";
+import { NameFieldsView } from "./sqm-name-fields-view";
 import scenario from "../sqm-name-fields/sqm-name-fields.feature";
 export default {
-  title: "Name Fields",
+  title: "Components/Name Fields",
   parameters: {
     scenario,
   },

package/dist/collection/components/sqm-portal-footer/PortalFooter.stories.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { PortalFooterView } from "./sqm-portal-footer-view";
 import scenario from "../sqm-portal-footer/sqm-portal-footer.feature";
 export default {
-  title: "Portal Footer",
+  title: "Components/Portal Footer",
   parameters: {
     scenario,
   },

package/dist/collection/components/sqm-program-menu/ProgramMenu.stories.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { createHookStory } from "../sqm-stencilbook/HookStoryAddon";
 import dashboardTemplate from "../../templates/Dashboard.html";
 export default {
-  title: "Program Menu",
+  title: "Components/Program Menu",
 };
 export const OneProgram = createHookStory(() => {
   return (h("sqm-program-menu", null,

package/dist/collection/components/sqm-referral-iframe/ReferralIframe.stories.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { ReferralIframeView, } from "./sqm-referral-iframe-view";
 import scenario from "../sqm-referral-iframe/sqm-referral-iframe.feature";
 export default {
-  title: "Referral Iframe",
+  title: "Components/Referral Iframe",
   parameters: {
     scenario,
   },

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

@@ -50,6 +50,8 @@ import * as CheckboxField from "../sqm-checkbox-field/CheckboxField.stories";
 import * as UseCheckboxField from "../sqm-checkbox-field/UseCheckboxField.stories";
 import * as DropdownField from "../sqm-dropdown-field/DropdownField.stories";
 import * as UseDropdownField from "../sqm-dropdown-field/UseDropdownField.stories";
+import * as InputField from "../sqm-input-field/InputField.stories";
+import * as UseInputField from "../sqm-input-field/UseInputField.stories";
 import * as RewardExchangeList from "../sqm-reward-exchange-list/RewardExchangeList.stories";
 import * as ProgramExplainer from "../sqm-program-explainer/ProgramExplainer.stories";
 import * as ProgramExplainerStep from "../sqm-program-explainer-step/ProgramExplainerStep.stories";
@@ -86,6 +88,7 @@ const stories = [
   UseLeaderboard,
   UseCheckboxField,
   UseDropdownField,
+  UseInputField,
   Router,
   PortalFrame,
   EditProfile,
@@ -119,6 +122,7 @@ const stories = [
   NameFields,
   CheckboxField,
   DropdownField,
+  InputField,
   RewardExchangeList,
   UseRewardExchangeList,
   UseTaskCard,