Widget load improvements

packages/bedrock-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/bedrock-components",
   "title": "Bedrock Components",
-  "version": "1.5.1",
+  "version": "1.5.2-0",
   "description": "Component library that adds advanced logic to your widgets and pages. Built and maintained by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Bedrock.svg",
   "main": "dist/index.cjs.js",

packages/bedrock-components/stencil.config.ts

@@ -1,43 +1,44 @@
-import { Config } from '@stencil/core';
-import alias from '@rollup/plugin-alias';
-import { grapesJsOutput } from '@saasquatch/stencil-grapes-plugin';
-import { OutputTarget } from '@stencil/core/internal';
-import { string } from 'rollup-plugin-string';
-import path from 'path';
-import plugin from '@raisins/stencil-docs-target';
+import { Config } from "@stencil/core";
+import alias from "@rollup/plugin-alias";
+import { grapesJsOutput } from "@saasquatch/stencil-grapes-plugin";
+import { OutputTarget } from "@stencil/core/internal";
+import { string } from "rollup-plugin-string";
+import path from "path";
+import plugin from "@raisins/stencil-docs-target";
 
 const useGrapesjs: OutputTarget = grapesJsOutput({
-  outDir: 'grapesjs',
+  outDir: "grapesjs",
 });
 
 export const config: Config = {
-  namespace: 'bedrock-components',
+  namespace: "bedrock-components",
   buildEs5: true,
-  globalScript: 'src/global/global.ts',
+  globalScript: "src/global/global.ts",
+  hydratedFlag: null,
   outputTargets: [
     {
-      type: 'dist',
+      type: "dist",
     },
     {
-      type: 'docs-readme',
+      type: "docs-readme",
     },
     {
-      type: 'www',
+      type: "www",
       serviceWorker: null, // disable service workers
     },
     useGrapesjs,
     plugin({
-      outDir: 'docs',
+      outDir: "docs",
     }),
   ],
-  plugins: [string({ include: '**/*.feature' })],
+  plugins: [string({ include: "**/*.feature" })],
   rollupPlugins: {
     before: [
       alias({
         entries: [
           {
-            find: '@saasquatch/universal-hooks',
-            replacement: path.resolve(__dirname, 'node_modules', '@saasquatch/stencil-hooks'),
+            find: "@saasquatch/universal-hooks",
+            replacement: path.resolve(__dirname, "node_modules", "@saasquatch/stencil-hooks"),
           },
         ],
       }),

packages/mint-components/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasquatch/mint-components",
   "title": "Mint Components",
-  "version": "2.1.0",
+  "version": "2.1.1-1",
   "description": "A minimal design library with components for referral and loyalty experiences. Built with Shoelace components by Saasquatch.",
   "icon": "https://res.cloudinary.com/saasquatch/image/upload/v1652219900/squatch-assets/For_Mint.svg",
   "raisins": "docs/raisins.json",
@@ -36,7 +36,7 @@
     "postinstall": "patch-package"
   },
   "devDependencies": {
-    "@formatjs/intl": "1.8.4",
+    "@formatjs/intl": "^3.1.8",
     "@formatjs/intl-pluralrules": "^1.5.8",
     "@formatjs/intl-relativetimeformat": "4.5.15",
     "@formatjs/intl-utils": "^2.2.5",
@@ -107,4 +107,4 @@
   },
   "homepage": "https://github.com/saasquatch/program-tools",
   "license": "MIT"
-}
+}

packages/mint-components/src/components.d.ts

@@ -34,7 +34,7 @@ import { NavigationMenuViewProps } from "./components/sqm-navigation-menu/sqm-na
 import { NavigationSidebarViewProps } from "./components/sqm-navigation-sidebar/sqm-navigation-sidebar-view";
 import { NavigationSidebarItemViewProps } from "./components/sqm-navigation-sidebar-item/sqm-navigation-sidebar-item-view";
 import { UsePagination } from "./components/sqm-pagination/usePagination";
-import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/sqm-password-field";
+import { PasswordFieldViewDemoProps } from "./components/sqm-password-field/usePasswordField";
 import { PayoutButtonScrollViewProps } from "./components/sqm-payout-button-scroll/sqm-payout-button-scroll-view";
 import { PayoutStatusAlertViewProps } from "./components/tax-and-cash/sqm-payout-status-alert/sqm-payout-status-alert-view";
 import { ChangeMarketingViewProps } from "./components/sqm-portal-change-marketing/sqm-portal-change-marketing-view";
@@ -985,6 +985,11 @@ export namespace Components {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading": boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -4957,6 +4962,16 @@ export namespace Components {
          */
         "tooltiptext": string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -7707,6 +7722,12 @@ declare global {
         prototype: HTMLSqmShareLinkElement;
         new (): HTMLSqmShareLinkElement;
     };
+    interface HTMLSqmSkeletonElement extends Components.SqmSkeleton, HTMLStencilElement {
+    }
+    var HTMLSqmSkeletonElement: {
+        prototype: HTMLSqmSkeletonElement;
+        new (): HTMLSqmSkeletonElement;
+    };
     interface HTMLSqmStatContainerElement extends Components.SqmStatContainer, HTMLStencilElement {
     }
     var HTMLSqmStatContainerElement: {
@@ -7925,6 +7946,7 @@ declare global {
         "sqm-share-button": HTMLSqmShareButtonElement;
         "sqm-share-code": HTMLSqmShareCodeElement;
         "sqm-share-link": HTMLSqmShareLinkElement;
+        "sqm-skeleton": HTMLSqmSkeletonElement;
         "sqm-stat-container": HTMLSqmStatContainerElement;
         "sqm-stencilbook": HTMLSqmStencilbookElement;
         "sqm-tab": HTMLSqmTabElement;
@@ -8870,6 +8892,11 @@ declare namespace LocalJSX {
           * @uiName Icon
          */
         "icon"?: string;
+        /**
+          * Loading state for the alert.
+          * @uiName Loading
+         */
+        "loading"?: boolean;
         /**
           * Render the alert with transparent styles
          */
@@ -12813,6 +12840,16 @@ declare namespace LocalJSX {
          */
         "tooltiptext"?: string;
     }
+    interface SqmSkeleton {
+        /**
+          * @uiName Height (in pixels or %)
+         */
+        "height"?: string;
+        /**
+          * @uiName Width (in pixels or %)
+         */
+        "width"?: string;
+    }
     interface SqmStatContainer {
         /**
           * Controls the alignment of the flexbox
@@ -15016,6 +15053,7 @@ declare namespace LocalJSX {
         "sqm-share-button": SqmShareButton;
         "sqm-share-code": SqmShareCode;
         "sqm-share-link": SqmShareLink;
+        "sqm-skeleton": SqmSkeleton;
         "sqm-stat-container": SqmStatContainer;
         "sqm-stencilbook": SqmStencilbook;
         "sqm-tab": SqmTab;
@@ -15149,6 +15187,7 @@ declare module "@stencil/core" {
             "sqm-share-button": LocalJSX.SqmShareButton & JSXBase.HTMLAttributes<HTMLSqmShareButtonElement>;
             "sqm-share-code": LocalJSX.SqmShareCode & JSXBase.HTMLAttributes<HTMLSqmShareCodeElement>;
             "sqm-share-link": LocalJSX.SqmShareLink & JSXBase.HTMLAttributes<HTMLSqmShareLinkElement>;
+            "sqm-skeleton": LocalJSX.SqmSkeleton & JSXBase.HTMLAttributes<HTMLSqmSkeletonElement>;
             "sqm-stat-container": LocalJSX.SqmStatContainer & JSXBase.HTMLAttributes<HTMLSqmStatContainerElement>;
             "sqm-stencilbook": LocalJSX.SqmStencilbook & JSXBase.HTMLAttributes<HTMLSqmStencilbookElement>;
             "sqm-tab": LocalJSX.SqmTab & JSXBase.HTMLAttributes<HTMLSqmTabElement>;

packages/mint-components/src/components/sqm-coupon-code/readme.md

@@ -45,6 +45,7 @@
 ```mermaid
 graph TD;
   sqm-coupon-code --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-coupon-code
   style sqm-coupon-code fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/mint-components/src/components/sqm-edit-profile/readme.md

@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-edit-profile --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   sqm-stencilbook --> sqm-edit-profile
   style sqm-edit-profile fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/mint-components/src/components/sqm-edit-profile/sqm-edit-profile-view.tsx

@@ -61,7 +61,11 @@ const EditProfileView = (props: EditProfileViewProps) => {
         <form class="FormWrapper" onSubmit={callbacks.onSubmit}>
           <div class="FormSection">
             {states.formState.error && (
-              <sqm-form-message type="error" exportparts="erroralert-icon">
+              <sqm-form-message
+                loading={states.loading}
+                type="error"
+                exportparts="erroralert-icon"
+              >
                 <div part="erroralert-text">{states.formState.error}</div>
               </sqm-form-message>
             )}

packages/mint-components/src/components/sqm-empty/EmptyState.stories.tsx

@@ -47,7 +47,7 @@ const defaultElements = {
           return (
             <tr>
               <td>
-                <sl-skeleton></sl-skeleton>
+                <sqm-skeleton></sqm-skeleton>
               </td>
             </tr>
           );

packages/mint-components/src/components/sqm-form-message/FormMessage.stories.tsx

@@ -69,3 +69,12 @@ export const InfoAlertTransparent = () => (
     <p part="alert-description">This is the description</p>
   </sqm-form-message>
 );
+
+export const Loading = () => {
+  return (
+    <sqm-form-message type="success" loading={true}>
+      <p part="alert-title">This is the title</p>
+      <p part="alert-description">This is the description</p>
+    </sqm-form-message>
+  );
+};

packages/mint-components/src/components/sqm-form-message/readme.md

@@ -8,6 +8,7 @@
 | Property      | Attribute     | Description                                                                                                            | Type      | Default     |
 | ------------- | ------------- | ---------------------------------------------------------------------------------------------------------------------- | --------- | ----------- |
 | `icon`        | `icon`        | Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon | `string`  | `undefined` |
+| `loading`     | `loading`     | Loading state for the alert.                                                                                           | `boolean` | `false`     |
 | `transparent` | `transparent` | Render the alert with transparent styles                                                                               | `boolean` | `false`     |
 | `type`        | `type`        | Options include "success", "info", "warning", and "error"                                                              | `string`  | `undefined` |
 
@@ -45,9 +46,14 @@
  - [sqm-tax-and-cash-dashboard](../tax-and-cash/sqm-tax-and-cash-dashboard)
  - [sqm-user-info-form](../tax-and-cash/sqm-user-info-form)
 
+### Depends on
+
+- [sqm-skeleton](../sqm-skeleton)
+
 ### Graph
 ```mermaid
 graph TD;
+  sqm-form-message --> sqm-skeleton
   sqm-banking-info-form --> sqm-form-message
   sqm-code-verification --> sqm-form-message
   sqm-coupon-code --> sqm-form-message

packages/mint-components/src/components/sqm-form-message/sqm-form-message.tsx

@@ -20,6 +20,13 @@ export class FormMessage {
    * @uiName Alert type
    */
   @Prop() type: string;
+
+  /**
+   * Loading state for the alert.
+   *
+   * @uiName Loading
+   */
+  @Prop() loading: boolean = false;
   /**
    * Icon to use in alert. Use icon values from Shoelace (e.g. "star" or "heart") at https://shoelace.style/components/icon
    *
@@ -39,6 +46,10 @@ export class FormMessage {
   disconnectedCallback() {}
 
   render() {
+    if (this.loading) {
+      return <sqm-skeleton height="90px" width="100%"></sqm-skeleton>;
+    }
+
     if (this.type === "error") {
       return (
         <sl-alert

packages/mint-components/src/components/sqm-instant-access-registration/readme.md

@@ -37,6 +37,7 @@
 ```mermaid
 graph TD;
   sqm-instant-access-registration --> sqm-form-message
+  sqm-form-message --> sqm-skeleton
   style sqm-instant-access-registration fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

packages/mint-components/src/components/sqm-invoice-table/InvoiceTable.stories.tsx

@@ -18,27 +18,27 @@ const loadingElement = (
   <div slot="loading" style={{ display: "contents" }}>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   </div>

packages/mint-components/src/components/sqm-invoice-table/readme.md

@@ -36,13 +36,15 @@
 - [sqm-empty](../sqm-empty)
 - [sqm-table-row](../sqm-table-row)
 - [sqm-table-cell](../sqm-table-cell)
+- [sqm-skeleton](../sqm-skeleton)
 
 ### Graph
 ```mermaid
 graph TD;
   sqm-invoice-table --> sqm-empty
   sqm-invoice-table --> sqm-table-row
   sqm-invoice-table --> sqm-table-cell
+  sqm-invoice-table --> sqm-skeleton
   sqm-empty --> sqm-portal-container
   sqm-empty --> sqm-titled-section
   sqm-empty --> sqm-text

packages/mint-components/src/components/sqm-invoice-table/sqm-invoice-table.tsx

@@ -150,7 +150,7 @@ function LoadingRow() {
   return (
     <sqm-table-row>
       <sqm-table-cell colspan={6}>
-        <sl-skeleton></sl-skeleton>
+        <sqm-skeleton></sqm-skeleton>
       </sqm-table-cell>
     </sqm-table-row>
   );