@dbcdk/react-components 0.0.103 → 0.0.104

package/dist/components/skeleton-loader/SkeletonLoader.cjs

@@ -0,0 +1,442 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var SkeletonLoaderItem = require('./skeleton-loader-item/SkeletonLoaderItem');
+
+function SkeletonLoader({
+  type,
+  rows = 3,
+  columns = 3,
+  variant = "default",
+  speedSec = 3
+}) {
+  const resolvedRows = type === "dataPage" ? rows || 12 : rows;
+  const resolvedColumns = type === "dataPage" ? columns || 4 : columns;
+  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width,
+      height,
+      radius,
+      variant,
+      speedSec
+    },
+    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+  );
+  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width: 80 + i % 3 * 30,
+      height: 30,
+      radius: 6,
+      variant,
+      speedSec,
+      ariaLabel: "Loading filter"
+    },
+    `pill-${i}`
+  ));
+  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    SkeletonLoaderItem.SkeletonLoaderItem,
+    {
+      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
+      height: 12,
+      radius: 4,
+      variant,
+      speedSec,
+      ariaLabel: "Loading text line"
+    },
+    `text-${i}`
+  ));
+  const tableHeaderRow = () => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: resolvedColumns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          height: 20,
+          width: "90%",
+          radius: 6,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table header"
+        },
+        `thead-${i}`
+      ))
+    }
+  );
+  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: resolvedColumns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          height: 20,
+          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
+          radius: 4,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table cell"
+        },
+        `tcell-${rowIndex}-${colIndex}`
+      ))
+    },
+    `trow-${rowIndex}`
+  );
+  const inputFieldRow = (i) => {
+    const labelW = i % 3 === 0 ? "34%" : i % 3 === 1 ? "42%" : "28%";
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12
+              },
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: labelW,
+                  height: 10,
+                  radius: 4,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading label"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonLoaderItem.SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 25,
+              radius: 8,
+              variant,
+              speedSec,
+              ariaLabel: "Loading input"
+            }
+          )
+        ]
+      },
+      `if-${i}`
+    );
+  };
+  const inputFieldList = (count) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
+    Array.from({ length: count }).map((_, i) => inputFieldRow(i)),
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 8 }, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          width: 110,
+          height: 30,
+          radius: 8,
+          variant,
+          speedSec,
+          ariaLabel: "Loading action"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        SkeletonLoaderItem.SkeletonLoaderItem,
+        {
+          width: 90,
+          height: 30,
+          radius: 8,
+          variant,
+          speedSec,
+          ariaLabel: "Loading action"
+        }
+      )
+    ] })
+  ] });
+  const squares = () => {
+    const gap = 12;
+    const squareSize = `min(calc((100% - ${(resolvedColumns - 1) * gap}px) / ${resolvedColumns}), calc((100% - ${(resolvedRows - 1) * gap}px) / ${resolvedRows}))`;
+    const gridTemplateColumns = resolvedColumns === 1 ? "repeat(1, 100%)" : `repeat(${resolvedColumns}, ${squareSize})`;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns,
+          gridTemplateRows: `repeat(${resolvedRows}, ${squareSize})`,
+          gap,
+          justifyContent: "center",
+          alignContent: "center",
+          width: "100%",
+          height: "100%",
+          minHeight: 0,
+          flexGrow: 1
+        },
+        children: Array.from({ length: resolvedRows * resolvedColumns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonLoaderItem.SkeletonLoaderItem,
+          {
+            width: "100%",
+            height: "100%",
+            radius: 8,
+            variant,
+            speedSec,
+            ariaLabel: "Loading square"
+          },
+          `square-${i}`
+        ))
+      }
+    );
+  };
+  const filterbar = () => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(resolvedColumns) }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonLoaderItem.SkeletonLoaderItem,
+          {
+            width: 240,
+            height: 30,
+            variant,
+            speedSec,
+            ariaLabel: "Loading"
+          }
+        )
+      ]
+    }
+  );
+  const table = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+    tableHeaderRow(),
+    Array.from({ length: resolvedRows }).map((_, r) => tableBodyRow(r))
+  ] });
+  const dataPageHeader = () => /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 16,
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SkeletonLoaderItem.SkeletonLoaderItem,
+          {
+            width: "32%",
+            height: 24,
+            radius: 6,
+            variant,
+            speedSec,
+            ariaLabel: "Loading page header"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: { display: "flex", gap: 12, justifyContent: "flex-end", marginInlineStart: "auto" },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 110,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const getSkeletonItems = () => {
+    switch (type) {
+      case "button": {
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              justifyContent: "flex-start",
+              width: "100%",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 120,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SkeletonLoaderItem.SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              )
+            ]
+          }
+        );
+      }
+      case "card": {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonLoaderItem.SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 160,
+              radius: 12,
+              variant,
+              speedSec,
+              ariaLabel: "Loading card media"
+            }
+          ),
+          line("60%", 16, 6),
+          textBlock(3),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonLoaderItem.SkeletonLoaderItem,
+              {
+                width: 100,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              SkeletonLoaderItem.SkeletonLoaderItem,
+              {
+                width: 72,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
+              }
+            )
+          ] })
+        ] });
+      }
+      case "avatar": {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", width: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            SkeletonLoaderItem.SkeletonLoaderItem,
+            {
+              width: 48,
+              height: 48,
+              radius: "50%",
+              variant,
+              speedSec,
+              ariaLabel: "Loading avatar"
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
+            line("40%", 14),
+            line("25%", 12)
+          ] })
+        ] });
+      }
+      case "text": {
+        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(resolvedRows) });
+      }
+      case "table": {
+        return table();
+      }
+      case "filterbar": {
+        return filterbar();
+      }
+      case "inputFieldList": {
+        return inputFieldList(resolvedRows);
+      }
+      case "squares": {
+        return squares();
+      }
+      case "dataPage": {
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%" }, children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: {
+                paddingBottom: 16,
+                borderBottom: "var(--border-width-thin) solid var(--color-border-subtle)"
+              },
+              children: dataPageHeader()
+            }
+          ),
+          table()
+        ] });
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading content",
+      style: {
+        display: "flex",
+        flexGrow: 1,
+        flexDirection: "column",
+        gap: 16,
+        width: "100%",
+        height: type === "squares" ? "100%" : void 0
+      },
+      children: getSkeletonItems()
+    }
+  );
+}
+
+exports.SkeletonLoader = SkeletonLoader;