@wavemaker-ai/react-runtime 1.0.0-next.27766

package/components/common/wm-skeleton.d.ts

@@ -0,0 +1,102 @@
+import { CSSProperties } from "react";
+import { SkeletonProps } from "@mui/material/Skeleton";
+export type SkeletonLayout = "table" | "list" | "form" | "tabs" | "wizard" | "accordion";
+export interface WmSkeletonProps {
+    /** Selects a multi-element layout. Omit to render a single MUI `Skeleton`. */
+    type?: SkeletonLayout;
+    /** MUI Skeleton variant — only used when `type` is omitted. @default "rectangular" */
+    variant?: SkeletonProps["variant"];
+    width?: number | string;
+    height?: number | string;
+    /** @default "pulse" */
+    animation?: SkeletonProps["animation"];
+    /** Row count for `table`/`list` (default 5), tab/step/pane count for `tabs`/`wizard`/`accordion` (default 4), or field count for `form` (default 4). */
+    rows?: number;
+    /** Column count for `type="table"` (default 4) or content line count for `tabs`/`wizard`/`accordion` (default 3). */
+    columns?: number;
+    className?: string;
+    styles?: CSSProperties;
+}
+export type SkeletonConfig = Pick<WmSkeletonProps, "type" | "variant" | "width" | "height" | "animation" | "rows" | "columns">;
+/** Default row/column counts per layout type — single source of truth. */
+export declare const LAYOUT_DEFAULTS: {
+    table: {
+        rows: number;
+        columns: number;
+    };
+    list: {
+        rows: number;
+    };
+    form: {
+        rows: number;
+    };
+    tabs: {
+        rows: number;
+        columns: number;
+    };
+    wizard: {
+        rows: number;
+        columns: number;
+    };
+    accordion: {
+        rows: number;
+        columns: number;
+    };
+};
+/** Show skeleton while `loading` is true. Opt out only with explicit `showSkeleton={false}`. */
+export declare const shouldShowSkeleton: (loading?: boolean | string, showSkeleton?: boolean) => boolean;
+/**
+ * Hook that returns true only during the initial load.
+ * Once loading completes for the first time, always returns false —
+ * preventing skeleton from replacing (and unmounting) a stateful component
+ * on subsequent data fetches (e.g. pagination, sorting, filtering).
+ */
+export declare const useShouldShowSkeleton: (loading?: boolean | string, showSkeleton?: boolean) => boolean;
+export declare const SKELETON_REGISTRY: {
+    WmButton: {
+        variant: "rounded";
+        height: number;
+        width: number;
+    };
+    WmLabel: {
+        variant: "text";
+        width: number;
+    };
+    WmPicture: {
+        variant: "rectangular";
+        height: number;
+        width: number;
+    };
+    WmTable: {
+        rows: number;
+        columns: number;
+        type: "table";
+    };
+    WmList: {
+        rows: number;
+        type: "list";
+    };
+    WmForm: {
+        rows: number;
+        type: "form";
+    };
+    WmTabs: {
+        rows: number;
+        columns: number;
+        type: "tabs";
+    };
+    WmWizard: {
+        rows: number;
+        columns: number;
+        type: "wizard";
+    };
+    WmAccordion: {
+        rows: number;
+        columns: number;
+        type: "accordion";
+    };
+};
+/** Derived from the registry — never needs manual updates. */
+export type SkeletonRegistryKey = keyof typeof SKELETON_REGISTRY;
+export declare const WmSkeleton: ({ type, variant, height, animation, ...layoutProps }: WmSkeletonProps) => import("react/jsx-runtime").JSX.Element;
+export default WmSkeleton;

package/components/common/wm-skeleton.js

@@ -0,0 +1,356 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+var __objRest = (source, exclude) => {
+  var target = {};
+  for (var prop in source)
+    if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
+      target[prop] = source[prop];
+  if (source != null && __getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(source)) {
+      if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
+        target[prop] = source[prop];
+    }
+  return target;
+};
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useRef } from "react";
+import Skeleton from "@mui/material/Skeleton";
+import Box from "@mui/material/Box";
+import Stack from "@mui/material/Stack";
+import Table from "@mui/material/Table";
+import TableHead from "@mui/material/TableHead";
+import TableBody from "@mui/material/TableBody";
+import TableRow from "@mui/material/TableRow";
+import TableCell from "@mui/material/TableCell";
+const LAYOUT_DEFAULTS = {
+  table: { rows: 5, columns: 4 },
+  list: { rows: 5 },
+  form: { rows: 4 },
+  tabs: { rows: 4, columns: 3 },
+  wizard: { rows: 4, columns: 3 },
+  accordion: { rows: 4, columns: 3 }
+};
+const shouldShowSkeleton = (loading, showSkeleton) => {
+  if (showSkeleton === false) return false;
+  return Boolean(loading);
+};
+const useShouldShowSkeleton = (loading, showSkeleton) => {
+  const hasLoadedOnce = useRef(false);
+  if (!loading) {
+    hasLoadedOnce.current = true;
+  }
+  if (hasLoadedOnce.current) return false;
+  return shouldShowSkeleton(loading, showSkeleton);
+};
+const SKELETON_REGISTRY = {
+  WmButton: { variant: "rounded", height: 36, width: 100 },
+  WmLabel: { variant: "text", width: 160 },
+  WmPicture: { variant: "rectangular", height: 200, width: 200 },
+  WmTable: __spreadValues({ type: "table" }, LAYOUT_DEFAULTS.table),
+  WmList: __spreadValues({ type: "list" }, LAYOUT_DEFAULTS.list),
+  WmForm: __spreadValues({ type: "form" }, LAYOUT_DEFAULTS.form),
+  WmTabs: __spreadValues({ type: "tabs" }, LAYOUT_DEFAULTS.tabs),
+  WmWizard: __spreadValues({ type: "wizard" }, LAYOUT_DEFAULTS.wizard),
+  WmAccordion: __spreadValues({ type: "accordion" }, LAYOUT_DEFAULTS.accordion)
+};
+const repeat = (n, fn) => Array.from({ length: n }, (_, i) => fn(i));
+const wrapperStyle = (width, styles) => __spreadValues({
+  width: width != null ? width : "100%"
+}, styles);
+const FormFieldRow = ({ animation }) => /* @__PURE__ */ jsxs(Box, { children: [
+  /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "30%", animation, sx: { mb: 0.5 } }),
+  /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "100%", height: 36, animation })
+] });
+const ContentLines = ({
+  count,
+  animation
+}) => /* @__PURE__ */ jsx(Fragment, { children: repeat(count, (i) => /* @__PURE__ */ jsx(
+  Skeleton,
+  {
+    variant: "text",
+    width: `${Math.max(40, 75 - i * 8)}%`,
+    animation,
+    sx: { fontSize: "1rem" }
+  },
+  i
+)) });
+const TableSkeleton = ({
+  rows = LAYOUT_DEFAULTS.table.rows,
+  columns = LAYOUT_DEFAULTS.table.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(
+  Table,
+  {
+    className,
+    style: __spreadProps(__spreadValues({}, wrapperStyle(width, styles)), { tableLayout: "fixed" }),
+    "aria-hidden": "true",
+    children: [
+      /* @__PURE__ */ jsx(TableHead, { children: /* @__PURE__ */ jsx(TableRow, { children: repeat(columns, (i) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", animation }) }, i)) }) }),
+      /* @__PURE__ */ jsx(TableBody, { children: repeat(rows, (r) => /* @__PURE__ */ jsx(TableRow, { children: repeat(columns, (c) => /* @__PURE__ */ jsx(TableCell, { children: /* @__PURE__ */ jsx(Skeleton, { variant: "text", animation }) }, c)) }, r)) })
+    ]
+  }
+);
+const ListSkeleton = ({
+  rows = LAYOUT_DEFAULTS.list.rows,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsx(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+  Box,
+  {
+    sx: __spreadValues({
+      display: "flex",
+      alignItems: "flex-start",
+      gap: 1.5,
+      py: 1.25
+    }, i < rows - 1 && { borderBottom: 1, borderColor: "divider" }),
+    children: [
+      /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          variant: "circular",
+          width: 40,
+          height: 40,
+          animation,
+          sx: { flexShrink: 0 }
+        }
+      ),
+      /* @__PURE__ */ jsxs(Stack, { spacing: 0.75, sx: { flex: 1, minWidth: 0 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "75%", animation, sx: { fontSize: "1rem" } }),
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "text",
+            width: "50%",
+            animation,
+            sx: { fontSize: "0.875rem" }
+          }
+        )
+      ] })
+    ]
+  },
+  i
+)) });
+const FormSkeleton = ({ rows = 4, width, animation, className, styles }) => /* @__PURE__ */ jsx(Stack, { spacing: 2, className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: repeat(rows, (i) => /* @__PURE__ */ jsx(FormFieldRow, { animation }, i)) });
+const TAB_WIDTHS = [96, 72, 88, 64, 80];
+const TabsSkeleton = ({
+  rows = LAYOUT_DEFAULTS.tabs.rows,
+  columns = LAYOUT_DEFAULTS.tabs.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(Stack, { direction: "row", sx: { borderBottom: 2, borderColor: "divider" }, children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        position: "relative",
+        px: 1.25,
+        pb: 1.5,
+        opacity: i === 0 ? 1 : 0.4
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rounded",
+            width: TAB_WIDTHS[i % TAB_WIDTHS.length],
+            height: 20,
+            animation
+          }
+        ),
+        i === 0 && /* @__PURE__ */ jsx(
+          Box,
+          {
+            sx: {
+              position: "absolute",
+              bottom: -2,
+              left: 0,
+              right: 0,
+              height: 2,
+              bgcolor: "primary.main",
+              borderRadius: "2px 2px 0 0"
+            }
+          }
+        )
+      ]
+    },
+    i
+  )) }),
+  /* @__PURE__ */ jsxs(Stack, { spacing: 1.5, sx: { pt: 2.5 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "40%", animation, sx: { fontSize: "1.25rem" } }),
+    /* @__PURE__ */ jsx(ContentLines, { count: columns, animation }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: "100%", height: 80, animation, sx: { mt: 0.5 } })
+  ] })
+] });
+const WizardSkeleton = ({
+  rows = LAYOUT_DEFAULTS.wizard.rows,
+  columns = LAYOUT_DEFAULTS.wizard.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsxs(Stack, { className, style: wrapperStyle(width, styles), "aria-hidden": "true", children: [
+  /* @__PURE__ */ jsx(Stack, { direction: "row", alignItems: "flex-start", sx: { mb: 3 }, children: repeat(rows, (i) => /* @__PURE__ */ jsxs(
+    Box,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        flex: i < rows - 1 ? 1 : "none"
+      },
+      children: [
+        /* @__PURE__ */ jsxs(Stack, { alignItems: "center", spacing: 0.75, sx: { minWidth: 72 }, children: [
+          /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 32, height: 32, animation }),
+          /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 56, animation })
+        ] }),
+        i < rows - 1 && /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            variant: "rectangular",
+            animation,
+            sx: { flex: 1, height: 2, mx: 1, mt: 2 }
+          }
+        )
+      ]
+    },
+    i
+  )) }),
+  /* @__PURE__ */ jsx(Stack, { spacing: 2, sx: { mb: 3 }, children: repeat(columns, (i) => /* @__PURE__ */ jsx(FormFieldRow, { animation }, i)) }),
+  /* @__PURE__ */ jsxs(Stack, { direction: "row", spacing: 1, justifyContent: "flex-end", children: [
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 80, height: 36, animation }),
+    /* @__PURE__ */ jsx(Skeleton, { variant: "rounded", width: 80, height: 36, animation })
+  ] })
+] });
+const ACCORDION_HEADER_WIDTHS = ["60%", "45%", "70%", "50%"];
+const AccordionSkeleton = ({
+  rows = LAYOUT_DEFAULTS.accordion.rows,
+  columns = LAYOUT_DEFAULTS.accordion.columns,
+  width,
+  animation,
+  className,
+  styles
+}) => /* @__PURE__ */ jsx(
+  Stack,
+  {
+    spacing: 0.75,
+    className,
+    style: wrapperStyle(width, styles),
+    "aria-hidden": "true",
+    children: repeat(rows, (i) => {
+      const isExpanded = i === 0;
+      return /* @__PURE__ */ jsxs(
+        Box,
+        {
+          sx: { border: 1, borderColor: "divider", borderRadius: 1, overflow: "hidden" },
+          children: [
+            /* @__PURE__ */ jsxs(
+              Box,
+              {
+                sx: {
+                  display: "flex",
+                  alignItems: "center",
+                  justifyContent: "space-between",
+                  gap: 1,
+                  px: 2,
+                  py: 1.5,
+                  bgcolor: isExpanded ? "action.selected" : "transparent"
+                },
+                children: [
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      variant: "text",
+                      width: ACCORDION_HEADER_WIDTHS[i % ACCORDION_HEADER_WIDTHS.length],
+                      animation,
+                      sx: { fontSize: "1rem" }
+                    }
+                  ),
+                  /* @__PURE__ */ jsx(
+                    Skeleton,
+                    {
+                      variant: "rounded",
+                      width: 16,
+                      height: 8,
+                      animation,
+                      sx: { flexShrink: 0 }
+                    }
+                  )
+                ]
+              }
+            ),
+            isExpanded && /* @__PURE__ */ jsx(Stack, { spacing: 1, sx: { px: 2, py: 1.5, borderTop: 1, borderColor: "divider" }, children: /* @__PURE__ */ jsx(ContentLines, { count: columns, animation }) })
+          ]
+        },
+        i
+      );
+    })
+  }
+);
+const LAYOUT_MAP = {
+  table: TableSkeleton,
+  list: ListSkeleton,
+  form: FormSkeleton,
+  tabs: TabsSkeleton,
+  wizard: WizardSkeleton,
+  accordion: AccordionSkeleton
+};
+const WmSkeleton = (_a) => {
+  var _b = _a, {
+    type,
+    variant = "rectangular",
+    height,
+    animation = "pulse"
+  } = _b, layoutProps = __objRest(_b, [
+    "type",
+    "variant",
+    "height",
+    "animation"
+  ]);
+  if (type) {
+    const Layout = LAYOUT_MAP[type];
+    return /* @__PURE__ */ jsx(Layout, __spreadValues({ animation }, layoutProps));
+  }
+  return /* @__PURE__ */ jsx(
+    Skeleton,
+    {
+      variant,
+      width: layoutProps.width,
+      height,
+      animation,
+      className: layoutProps.className,
+      style: layoutProps.styles
+    }
+  );
+};
+var wm_skeleton_default = WmSkeleton;
+export {
+  LAYOUT_DEFAULTS,
+  SKELETON_REGISTRY,
+  WmSkeleton,
+  wm_skeleton_default as default,
+  shouldShowSkeleton,
+  useShouldShowSkeleton
+};