@saasquatch/mint-components 1.3.3-5 → 1.4.0

package/dist/collection/stories/PortalResetPassword.stories.js

@@ -1,153 +1,153 @@
-import { h } from "@stencil/core";
-import { PortalResetPasswordView, } from "../components/sqm-portal-reset-password/sqm-portal-reset-password-view";
-import scenario from "../components/sqm-portal-reset-password/sqm-portal-reset-password.feature";
-export default {
-  title: "Portal Reset Password",
-  parameters: {
-    scenario,
-  },
-};
-const defaultProps = {
-  states: {
-    error: "",
-    loading: false,
-    reset: false,
-    confirmPassword: true,
-    oobCodeValidating: false,
-    oobCodeValid: true,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-const defaultPropsNoConfirm = {
-  states: {
-    error: "",
-    loading: false,
-    reset: false,
-    confirmPassword: false,
-    oobCodeValidating: false,
-    oobCodeValid: true,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-const errorProps = {
-  states: {
-    error: "Something went wrong. Please try again.",
-    loading: false,
-    reset: false,
-    confirmPassword: true,
-    oobCodeValidating: false,
-    oobCodeValid: true,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-const loadingProps = {
-  states: {
-    error: "",
-    loading: true,
-    reset: false,
-    confirmPassword: true,
-    oobCodeValidating: false,
-    oobCodeValid: true,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-const successProps = {
-  states: {
-    error: "",
-    loading: false,
-    reset: true,
-    confirmPassword: true,
-    oobCodeValidating: false,
-    oobCodeValid: true,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-const validatingCodeProps = {
-  states: {
-    error: "",
-    loading: false,
-    reset: false,
-    confirmPassword: true,
-    oobCodeValidating: false,
-    oobCodeValid: false,
-    content: {
-      passwordResetHeader: "Password reset",
-      resetPasswordHeader: "Reset your password",
-      continueButtonText: "Continue",
-      resetPasswordButtonText: "Reset Password",
-      confirmPasswordFieldLabel: "Confirm Password",
-      passwordFieldLabel: "New Password",
-    },
-  },
-  callbacks: {
-    submit: async (e) => await e,
-    gotoNextPage: () => console.log("next page"),
-    failed: () => console.log("failed"),
-  },
-};
-export const Default = () => h(PortalResetPasswordView, Object.assign({}, defaultProps));
-export const DefaultWithoutConfirmField = () => (h(PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
-export const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps)));
-export const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps)));
-export const ResetPasswordSuccess = () => (h(PortalResetPasswordView, Object.assign({}, successProps)));
-export const CodeValidating = () => (h(PortalResetPasswordView, Object.assign({}, validatingCodeProps)));
+import { h } from "@stencil/core";
+import { PortalResetPasswordView, } from "../components/sqm-portal-reset-password/sqm-portal-reset-password-view";
+import scenario from "../components/sqm-portal-reset-password/sqm-portal-reset-password.feature";
+export default {
+  title: "Portal Reset Password",
+  parameters: {
+    scenario,
+  },
+};
+const defaultProps = {
+  states: {
+    error: "",
+    loading: false,
+    reset: false,
+    confirmPassword: true,
+    oobCodeValidating: false,
+    oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+const defaultPropsNoConfirm = {
+  states: {
+    error: "",
+    loading: false,
+    reset: false,
+    confirmPassword: false,
+    oobCodeValidating: false,
+    oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+const errorProps = {
+  states: {
+    error: "Something went wrong. Please try again.",
+    loading: false,
+    reset: false,
+    confirmPassword: true,
+    oobCodeValidating: false,
+    oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+const loadingProps = {
+  states: {
+    error: "",
+    loading: true,
+    reset: false,
+    confirmPassword: true,
+    oobCodeValidating: false,
+    oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+const successProps = {
+  states: {
+    error: "",
+    loading: false,
+    reset: true,
+    confirmPassword: true,
+    oobCodeValidating: false,
+    oobCodeValid: true,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+const validatingCodeProps = {
+  states: {
+    error: "",
+    loading: false,
+    reset: false,
+    confirmPassword: true,
+    oobCodeValidating: false,
+    oobCodeValid: false,
+    content: {
+      passwordResetHeader: "Password reset",
+      resetPasswordHeader: "Reset your password",
+      continueButtonText: "Continue",
+      resetPasswordButtonText: "Reset Password",
+      confirmPasswordFieldLabel: "Confirm Password",
+      passwordFieldLabel: "New Password",
+    },
+  },
+  callbacks: {
+    submit: async (e) => await e,
+    gotoNextPage: () => console.log("next page"),
+    failed: () => console.log("failed"),
+  },
+};
+export const Default = () => h(PortalResetPasswordView, Object.assign({}, defaultProps));
+export const DefaultWithoutConfirmField = () => (h(PortalResetPasswordView, Object.assign({}, defaultPropsNoConfirm)));
+export const ResetPasswordWithError = () => (h(PortalResetPasswordView, Object.assign({}, errorProps)));
+export const ResetPasswordLoading = () => (h(PortalResetPasswordView, Object.assign({}, loadingProps)));
+export const ResetPasswordSuccess = () => (h(PortalResetPasswordView, Object.assign({}, successProps)));
+export const CodeValidating = () => (h(PortalResetPasswordView, Object.assign({}, validatingCodeProps)));

package/dist/collection/stories/PortalTemplates.stories.js

@@ -1,156 +1,156 @@
-import { useState } from "@saasquatch/universal-hooks";
-import { h } from "@stencil/core";
-import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
-import portalTemplate from "../templates/Portal.html";
-import portalLeadSubmitTemplate from "../templates/PortalLeadSubmit.html";
-import portalLeadSubmitTemplateWithDashboard from "../templates/PortalLeadSubmitWithDashboard.html";
-import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html";
-import multiProgramTemplate from "../templates/MultiProgramPortal.html";
-import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
-import dashboardTemplate from "../templates/Dashboard.html";
-import leadSubmitTemplate from "../templates/LeadSubmit.html";
-import editProfileTemplate from "../templates/EditProfile.html";
-import activityTemplate from "../templates/Activity.html";
-import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
-import verifyEmailTemplate from "../templates/VerifyEmail.html";
-import loginTemplate from "../templates/Login.html";
-import registerTemplate from "../templates/Register.html";
-import forgotPasswordTemplate from "../templates/ForgotPassword.html";
-import resetPasswordTemplate from "../templates/ResetPassword.html";
-import emailVerifiedTemplate from "../templates/EmailVerified.html";
-import emailVerificationTemplate from "../templates/EmailVerification.html";
-import marked from "marked";
-import LoginReadme from "../components/sqm-portal-login/readme.md";
-import ReferralIframeReadme from "../components/sqm-referral-iframe/readme.md";
-import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md";
-import RegisterReadme from "../components/sqm-portal-register/readme.md";
-import EditProfileReadme from "../components/sqm-portal-profile/readme.md";
-import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md";
-import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md";
-import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md";
-import { navigation } from "@saasquatch/component-boilerplate";
-export default {
-  title: "Templates / Portal",
-};
-// slot="footer"
-// support-email="john@foodservicerewards.com"
-// terms-link="example.com"
-// faq-link="example.com"
-// padding="large"
-// show-powered-by="false"
-// powered-by-link="https://www.saasquatch.com/"
-function useTemplate(templateString) {
-  const [editedTemplate, setEditedTemplate] = useState(templateString);
-  const [previewTemplate, setPreviewTemplate] = useState(templateString);
-  return {
-    states: { previewTemplate, editedTemplate },
-    callbacks: { setEditedTemplate, setPreviewTemplate },
-  };
-}
-function TemplateView(props) {
-  const { states, callbacks, readme } = props;
-  return [
-    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
-    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
-    readme ? (h("details", null,
-      h("summary", null, "Props readme"),
-      h("div", { innerHTML: marked(readme) }))) : (""),
-    h("div", { innerHTML: states.previewTemplate }),
-  ];
-}
-function Buttons({ callbacks, states, template }) {
-  return (h("div", null,
-    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
-    h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
-}
-function DefaultTemplateView(props) {
-  const { states, callbacks } = props;
-  return (h("div", { style: { height: "50vh" } },
-    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
-    h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
-    h("h2", null, "Navigation"),
-    h("div", { style: {
-        display: "grid",
-        gridTemplateColumns: "repeat(9, 80px)",
-        gridGap: "10px",
-      } },
-      h("button", { onClick: () => navigation.push("/") }, "Dashboard"),
-      props.leadSubmit && (h("button", { onClick: () => navigation.push("/refer") }, "Submit a Referral")),
-      h("button", { onClick: () => navigation.push("/activity") }, "Activity"),
-      h("button", { onClick: () => navigation.push("/editProfile") }, "Edit Profile"),
-      h("button", { onClick: () => navigation.push("/login") }, "Login"),
-      h("button", { onClick: () => navigation.push("/register") }, "Register"),
-      h("button", { onClick: () => navigation.push("/emailVerification") }, "Email Verification"),
-      h("button", { onClick: () => navigation.push("/verifyEmail") }, "Verify Email"),
-      h("button", { onClick: () => navigation.push("/forgotPassword") }, "Forgot Password"),
-      h("button", { onClick: () => navigation.push("/resetPassword") }, "Reset Password")),
-    h("br", null),
-    h("div", { innerHTML: states.previewTemplate })));
-}
-export const DefaultPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(portalTemplate);
-  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
-});
-export const MultiProgramPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(multiProgramTemplate);
-  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
-});
-export const LeadSubmitPortal = createHookStory(() => {
-  const { states, callbacks } = useTemplate(portalLeadSubmitTemplate);
-  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalLeadSubmitTemplateWithDashboard, leadSubmit: true }));
-});
-export const Login = createHookStory(() => {
-  const { states, callbacks } = useTemplate(loginTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
-});
-export const ForgotPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate(forgotPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
-});
-export const Register = createHookStory(() => {
-  const { states, callbacks } = useTemplate(registerTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
-});
-export const Dashboard = createHookStory(() => {
-  const { states, callbacks } = useTemplate(dashboardTemplate);
-  return h(TemplateView, { states: states, callbacks: callbacks });
-});
-export const LeadSubmitIframe = createHookStory(() => {
-  const { states, callbacks } = useTemplate(leadSubmitTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
-});
-export const Activity = createHookStory(() => {
-  const { states, callbacks } = useTemplate(activityTemplate);
-  return h(TemplateView, { states: states, callbacks: callbacks });
-});
-export const EditProfile = createHookStory(() => {
-  const { states, callbacks } = useTemplate(editProfileTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
-});
-export const ResetPassword = createHookStory(() => {
-  const { states, callbacks } = useTemplate(resetPasswordTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
-});
-export const EmailVerification = createHookStory(() => {
-  const { states, callbacks } = useTemplate(emailVerificationTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
-});
-export const EmailVerified = createHookStory(() => {
-  const { states, callbacks } = useTemplate(emailVerifiedTemplate);
-  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
-});
-export const Widget = createHookStory(() => {
-  return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
-      data: {
-        html: dashboardTemplate,
-      },
-    } }));
-});
-export const ResetPasswordEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate(resetPasswordEmailTemplate);
-  return h(TemplateView, { states: states, callbacks: callbacks });
-});
-export const VerifyEmail = createHookStory(() => {
-  const { states, callbacks } = useTemplate(verifyEmailTemplate);
-  return h(TemplateView, { states: states, callbacks: callbacks });
-});
+import { useState } from "@saasquatch/universal-hooks";
+import { h } from "@stencil/core";
+import { createHookStory } from "../components/sqm-stencilbook/HookStoryAddon";
+import portalTemplate from "../templates/Portal.html";
+import portalLeadSubmitTemplate from "../templates/PortalLeadSubmit.html";
+import portalLeadSubmitTemplateWithDashboard from "../templates/PortalLeadSubmitWithDashboard.html";
+import portalTemplateWithDashboard from "../templates/PortalWithDashboard.html";
+import multiProgramTemplate from "../templates/MultiProgramPortal.html";
+import multiProgramTemplateWithDashboard from "../templates/MultiProgramPortalWithDashboard.html";
+import dashboardTemplate from "../templates/Dashboard.html";
+import leadSubmitTemplate from "../templates/LeadSubmit.html";
+import editProfileTemplate from "../templates/EditProfile.html";
+import activityTemplate from "../templates/Activity.html";
+import resetPasswordEmailTemplate from "../templates/ResetPasswordEmail.html";
+import verifyEmailTemplate from "../templates/VerifyEmail.html";
+import loginTemplate from "../templates/Login.html";
+import registerTemplate from "../templates/Register.html";
+import forgotPasswordTemplate from "../templates/ForgotPassword.html";
+import resetPasswordTemplate from "../templates/ResetPassword.html";
+import emailVerifiedTemplate from "../templates/EmailVerified.html";
+import emailVerificationTemplate from "../templates/EmailVerification.html";
+import marked from "marked";
+import LoginReadme from "../components/sqm-portal-login/readme.md";
+import ReferralIframeReadme from "../components/sqm-referral-iframe/readme.md";
+import ForgotPasswordReadme from "../components/sqm-portal-forgot-password/readme.md";
+import RegisterReadme from "../components/sqm-portal-register/readme.md";
+import EditProfileReadme from "../components/sqm-portal-profile/readme.md";
+import ResetPasswordReadme from "../components/sqm-portal-reset-password/readme.md";
+import EmailVerificationReadme from "../components/sqm-portal-email-verification/readme.md";
+import EmailVerifiedReadme from "../components/sqm-portal-verify-email/readme.md";
+import { navigation } from "@saasquatch/component-boilerplate";
+export default {
+  title: "Templates / Portal",
+};
+// slot="footer"
+// support-email="john@foodservicerewards.com"
+// terms-link="example.com"
+// faq-link="example.com"
+// padding="large"
+// show-powered-by="false"
+// powered-by-link="https://www.saasquatch.com/"
+function useTemplate(templateString) {
+  const [editedTemplate, setEditedTemplate] = useState(templateString);
+  const [previewTemplate, setPreviewTemplate] = useState(templateString);
+  return {
+    states: { previewTemplate, editedTemplate },
+    callbacks: { setEditedTemplate, setPreviewTemplate },
+  };
+}
+function TemplateView(props) {
+  const { states, callbacks, readme } = props;
+  return [
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    readme ? (h("details", null,
+      h("summary", null, "Props readme"),
+      h("div", { innerHTML: marked(readme) }))) : (""),
+    h("div", { innerHTML: states.previewTemplate }),
+  ];
+}
+function Buttons({ callbacks, states, template }) {
+  return (h("div", null,
+    h("button", { onClick: () => callbacks.setPreviewTemplate(states.editedTemplate) }, "Update Preview"),
+    h("button", { style: { marginLeft: "10px" }, onClick: () => callbacks.setPreviewTemplate(template) }, "Preview Dashboard")));
+}
+function DefaultTemplateView(props) {
+  const { states, callbacks } = props;
+  return (h("div", { style: { height: "50vh" } },
+    h("textarea", { style: { width: "100%", height: "300px" }, onChange: (e) => callbacks.setEditedTemplate(e.target.value) }, states.editedTemplate),
+    h(Buttons, { states: states, callbacks: callbacks, template: props.template }),
+    h("h2", null, "Navigation"),
+    h("div", { style: {
+        display: "grid",
+        gridTemplateColumns: "repeat(9, 80px)",
+        gridGap: "10px",
+      } },
+      h("button", { onClick: () => navigation.push("/") }, "Dashboard"),
+      props.leadSubmit && (h("button", { onClick: () => navigation.push("/refer") }, "Submit a Referral")),
+      h("button", { onClick: () => navigation.push("/activity") }, "Activity"),
+      h("button", { onClick: () => navigation.push("/editProfile") }, "Edit Profile"),
+      h("button", { onClick: () => navigation.push("/login") }, "Login"),
+      h("button", { onClick: () => navigation.push("/register") }, "Register"),
+      h("button", { onClick: () => navigation.push("/emailVerification") }, "Email Verification"),
+      h("button", { onClick: () => navigation.push("/verifyEmail") }, "Verify Email"),
+      h("button", { onClick: () => navigation.push("/forgotPassword") }, "Forgot Password"),
+      h("button", { onClick: () => navigation.push("/resetPassword") }, "Reset Password")),
+    h("br", null),
+    h("div", { innerHTML: states.previewTemplate })));
+}
+export const DefaultPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate(portalTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalTemplateWithDashboard }));
+});
+export const MultiProgramPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate(multiProgramTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: multiProgramTemplateWithDashboard }));
+});
+export const LeadSubmitPortal = createHookStory(() => {
+  const { states, callbacks } = useTemplate(portalLeadSubmitTemplate);
+  return (h(DefaultTemplateView, { states: states, callbacks: callbacks, template: portalLeadSubmitTemplateWithDashboard, leadSubmit: true }));
+});
+export const Login = createHookStory(() => {
+  const { states, callbacks } = useTemplate(loginTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: LoginReadme }));
+});
+export const ForgotPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate(forgotPasswordTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ForgotPasswordReadme }));
+});
+export const Register = createHookStory(() => {
+  const { states, callbacks } = useTemplate(registerTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: RegisterReadme }));
+});
+export const Dashboard = createHookStory(() => {
+  const { states, callbacks } = useTemplate(dashboardTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const LeadSubmitIframe = createHookStory(() => {
+  const { states, callbacks } = useTemplate(leadSubmitTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ReferralIframeReadme }));
+});
+export const Activity = createHookStory(() => {
+  const { states, callbacks } = useTemplate(activityTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const EditProfile = createHookStory(() => {
+  const { states, callbacks } = useTemplate(editProfileTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EditProfileReadme }));
+});
+export const ResetPassword = createHookStory(() => {
+  const { states, callbacks } = useTemplate(resetPasswordTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: ResetPasswordReadme }));
+});
+export const EmailVerification = createHookStory(() => {
+  const { states, callbacks } = useTemplate(emailVerificationTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerificationReadme }));
+});
+export const EmailVerified = createHookStory(() => {
+  const { states, callbacks } = useTemplate(emailVerifiedTemplate);
+  return (h(TemplateView, { states: states, callbacks: callbacks, readme: EmailVerifiedReadme }));
+});
+export const Widget = createHookStory(() => {
+  return (h("sqb-widget", { "widget-type": "p/Vacay-referral/w/referrerWidget", demoData: {
+      data: {
+        html: dashboardTemplate,
+      },
+    } }));
+});
+export const ResetPasswordEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate(resetPasswordEmailTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});
+export const VerifyEmail = createHookStory(() => {
+  const { states, callbacks } = useTemplate(verifyEmailTemplate);
+  return h(TemplateView, { states: states, callbacks: callbacks });
+});