@plurix/ecom-components 1.10.0 → 1.10.7

package/dist/main.d.ts

@@ -8,3 +8,5 @@ export * from './packages/Regionalization/types';
 export { Modal } from './packages/Modal/Modal';
 export * from './types/ChangeOrderModal';
 export { ChangeOrderModal } from './packages/ChangeOrderModal/ChangeOrderModal';
+export { Skeleton } from './packages/Skeleton';
+export type { SkeletonProps } from './packages/Skeleton';

package/dist/main.js

@@ -1,18 +1,20 @@
 import { CartClubAlert as e } from "./packages/CartClubAlert/CartClubAlert.js";
 import { Carousel as p } from "./packages/Carousel/Carousel.js";
-import { Coupons as f } from "./packages/Coupons/Coupons.js";
-import { Onboarding as x } from "./packages/Onboarding/Onboarding.js";
+import { Coupons as m } from "./packages/Coupons/Coupons.js";
+import { Onboarding as a } from "./packages/Onboarding/Onboarding.js";
 import { Tour as n } from "./packages/Tour/Tour.js";
 import { Regionalization as d } from "./packages/Regionalization/Regionalization.js";
 import { Modal as u } from "./packages/Modal/Modal.js";
 import { ChangeOrderModal as b } from "./packages/ChangeOrderModal/ChangeOrderModal.js";
+import { Skeleton as M } from "./packages/Skeleton/index.js";
 export {
   p as Carousel,
   e as CartClubAlert,
   b as ChangeOrderModal,
-  f as Coupons,
+  m as Coupons,
   u as Modal,
-  x as Onboarding,
+  a as Onboarding,
   d as Regionalization,
+  M as Skeleton,
   n as Tour
 };

package/dist/packages/Skeleton/components/SkeletonAnimation/SkeletonAnimation.d.ts

@@ -0,0 +1,9 @@
+import { default as React } from 'react';
+import { StyleAnimation } from '../../types/types';
+
+interface SkeletonAnimationProps {
+    styleAnimation?: StyleAnimation;
+    children?: React.ReactNode;
+}
+export declare const SkeletonAnimation: React.FC<SkeletonAnimationProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonAnimation/SkeletonAnimation.js

@@ -0,0 +1,14 @@
+import { jsx as e } from "react/jsx-runtime";
+const o = ({
+  styleAnimation: t
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    "data-testid": "skeleton-animation",
+    style: t,
+    className: "skeleton-animation"
+  }
+);
+export {
+  o as SkeletonAnimation
+};

package/dist/packages/Skeleton/components/SkeletonContainer/SkeletonContainer.d.ts

@@ -0,0 +1,15 @@
+import { default as React, RefObject } from 'react';
+import { StyleContainers } from '../../types/types';
+
+interface SkeletonContainerProps {
+    skeletonContainer?: RefObject<HTMLDivElement>;
+    placeholder?: string;
+    styleContainers?: StyleContainers | {
+        position: 'relative';
+    } | {
+        cursor: 'progress';
+    };
+    children?: React.ReactNode;
+}
+export declare const SkeletonContainer: React.FC<SkeletonContainerProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonContainer/SkeletonContainer.js

@@ -0,0 +1,22 @@
+import { jsxs as s } from "react/jsx-runtime";
+const a = ({
+  children: e,
+  skeletonContainer: t,
+  placeholder: n,
+  styleContainers: o
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    "data-testid": "skeleton-container",
+    ref: t,
+    style: o,
+    className: "skeleton-container",
+    children: [
+      n,
+      e
+    ]
+  }
+);
+export {
+  a as SkeletonContainer
+};

package/dist/packages/Skeleton/components/SkeletonRender/SkeletonRender.d.ts

@@ -0,0 +1,21 @@
+import { default as React, RefObject } from 'react';
+import { StyleContainers, StyleTable, StyleCell, StyleAnimation } from '../../types/types';
+
+interface SkeletonRenderProps {
+    count: number;
+    wrappers: number[];
+    rows: number;
+    tableRows: number[];
+    columns: number;
+    tableColumns: number[];
+    skeletonContainer?: RefObject<HTMLDivElement>;
+    placeholder: string | undefined;
+    styleContainers?: StyleContainers;
+    styleTable?: StyleTable;
+    styleCell?: StyleCell;
+    styleAnimation?: StyleAnimation;
+    animation: boolean | undefined;
+    children?: React.ReactNode;
+}
+export declare const SkeletonRender: React.FC<SkeletonRenderProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonRender/SkeletonRender.js

@@ -0,0 +1,57 @@
+import { jsx as r, jsxs as b } from "react/jsx-runtime";
+import { SkeletonContainer as m } from "../SkeletonContainer/SkeletonContainer.js";
+import { SkeletonWrapper as g } from "../SkeletonWrapper/SkeletonWrapper.js";
+import { SkeletonTable as v } from "../SkeletonTable/SkeletonTable.js";
+import { SkeletonAnimation as f } from "../SkeletonAnimation/SkeletonAnimation.js";
+const w = ({
+  count: S,
+  wrappers: d,
+  rows: i,
+  tableRows: k,
+  columns: h,
+  tableColumns: t,
+  skeletonContainer: c,
+  placeholder: u,
+  styleContainers: o,
+  styleTable: x,
+  styleCell: j,
+  styleAnimation: e,
+  animation: p
+}) => S > 0 ? /* @__PURE__ */ r(
+  m,
+  {
+    skeletonContainer: c,
+    styleContainers: (o == null ? void 0 : o.cursor) && { cursor: "progress" },
+    children: d.map((l) => /* @__PURE__ */ r(
+      g,
+      {
+        styleContainers: o,
+        placeholder: u,
+        children: p && /* @__PURE__ */ r(f, { styleAnimation: e })
+      },
+      l
+    ))
+  }
+) : i > 0 && h > 0 ? /* @__PURE__ */ b(m, { styleContainers: { position: "relative" }, children: [
+  /* @__PURE__ */ r(
+    v,
+    {
+      tableRows: k,
+      tableColumns: t,
+      styleTable: x,
+      styleCell: j
+    }
+  ),
+  p && /* @__PURE__ */ r(f, { styleAnimation: e })
+] }) : /* @__PURE__ */ r(
+  m,
+  {
+    skeletonContainer: c,
+    styleContainers: o,
+    placeholder: u,
+    children: p && /* @__PURE__ */ r(f, { styleAnimation: e })
+  }
+);
+export {
+  w as SkeletonRender
+};

package/dist/packages/Skeleton/components/SkeletonTable/SkeletonTable.d.ts

@@ -0,0 +1,12 @@
+import { default as React } from 'react';
+import { StyleTable, StyleCell } from '../../types/types';
+
+interface SkeletonTableProps {
+    tableRows: number[];
+    tableColumns: number[];
+    styleTable?: StyleTable;
+    styleCell?: StyleCell;
+    children?: React.ReactNode;
+}
+export declare const SkeletonTable: React.FC<SkeletonTableProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonTable/SkeletonTable.js

@@ -0,0 +1,18 @@
+import { jsx as e } from "react/jsx-runtime";
+const c = ({
+  tableRows: l,
+  tableColumns: t,
+  styleTable: s,
+  styleCell: a
+}) => /* @__PURE__ */ e(
+  "table",
+  {
+    "data-testid": "skeleton-table",
+    style: s,
+    className: "skeleton-table",
+    children: /* @__PURE__ */ e("tbody", { style: { display: "block" }, children: l.map((o) => /* @__PURE__ */ e("tr", { style: { display: "block" }, children: t.map((d) => /* @__PURE__ */ e("td", { style: a }, d)) }, o)) })
+  }
+);
+export {
+  c as SkeletonTable
+};

package/dist/packages/Skeleton/components/SkeletonWrapper/SkeletonWrapper.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+import { StyleContainers } from '../../types/types';
+
+interface SkeletonWrapperProps {
+    placeholder?: string;
+    styleContainers?: StyleContainers;
+    children?: React.ReactNode;
+}
+export declare const SkeletonWrapper: React.FC<SkeletonWrapperProps>;
+export {};

package/dist/packages/Skeleton/components/SkeletonWrapper/SkeletonWrapper.js

@@ -0,0 +1,20 @@
+import { jsxs as s } from "react/jsx-runtime";
+const a = ({
+  children: e,
+  placeholder: r,
+  styleContainers: t
+}) => /* @__PURE__ */ s(
+  "div",
+  {
+    "data-testid": "skeleton-wrapper",
+    style: t,
+    className: "skeleton-wrapper",
+    children: [
+      r,
+      e
+    ]
+  }
+);
+export {
+  a as SkeletonWrapper
+};

package/dist/packages/Skeleton/hooks/useResponsiveImages.d.ts

@@ -0,0 +1,9 @@
+import { ResponsiveImage } from '../types/types';
+
+declare const useResponsiveImages: (responsiveImage: undefined | ResponsiveImage | ResponsiveImage[], responsiveImageSSR: undefined | ResponsiveImage) => {
+    srcWidth: number;
+    srcHeight: number;
+    widthSkeletonContainer: number;
+    skeletonContainer: import('react').MutableRefObject<HTMLDivElement | null>;
+};
+export default useResponsiveImages;

package/dist/packages/Skeleton/hooks/useResponsiveImages.js

@@ -0,0 +1,34 @@
+import { useRef as B, useState as f, useEffect as b } from "react";
+const E = (t, c) => {
+  const d = B(null), [e, l] = f(0), [u, w] = f(0), [o, h] = f(0), [y, k] = f(0), W = () => {
+    d.current && (l(d.current.offsetWidth), w(window.innerWidth));
+  }, H = (i) => {
+    i.sort((n, r) => n.breakIn && r.breakIn ? n.breakIn > r.breakIn ? 1 : -1 : !n.breakIn && r.breakIn ? 1 : n.breakIn && !r.breakIn ? -1 : n.srcWidth > r.srcWidth ? 1 : -1);
+  }, A = (i) => {
+    i.sort((n, r) => n.breakIn && r.breakIn && n.breakIn === r.breakIn ? n.srcWidth > r.srcWidth ? 1 : -1 : 0);
+  };
+  return b(() => (!c && t && window.addEventListener("resize", () => W()), () => window.removeEventListener("resize", () => W())), [t, c]), b(() => {
+    t && !c && (W(), Array.isArray(t) ? (H(t), A(t), h(t[0].srcWidth), k(t[0].srcHeight)) : (h(t.srcWidth), k(t.srcHeight)));
+  }, [d, t, c]), b(() => {
+    if (!c && t && Array.isArray(t) && t[0].breakIn)
+      for (const i in t) {
+        const n = t[i], r = t[+i + 1];
+        if (t[0].breakIn && t[0].breakIn >= u) {
+          h(t[0].srcWidth), k(t[0].srcHeight);
+          break;
+        }
+        if (n.breakIn !== void 0 && n.breakIn <= u && r) {
+          h(r.srcWidth), k(r.srcHeight);
+          break;
+        }
+      }
+  }, [u, t, c]), {
+    srcWidth: o,
+    srcHeight: y,
+    widthSkeletonContainer: e,
+    skeletonContainer: d
+  };
+};
+export {
+  E as default
+};

package/dist/packages/Skeleton/index.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+import { ResponsiveImage } from './types/types';
+
+export interface SkeletonProps {
+    width?: number | string;
+    height?: number | string;
+    margin?: number | 'auto';
+    padding?: number;
+    border?: true;
+    borderColor?: string;
+    borderRadius?: number;
+    circle?: true;
+    backgroundColor?: string;
+    color?: string;
+    cursor?: true;
+    placeholder?: string;
+    placeholderPosition?: {
+        horizontal: 'left' | 'center' | 'right';
+        vertical: 'top' | 'center' | 'bottom';
+    };
+    animation?: true;
+    animationColor?: string;
+    animationDuration?: number;
+    count?: number;
+    responsiveImage?: ResponsiveImage | ResponsiveImage[];
+    responsiveImageSSR?: ResponsiveImage;
+    table?: {
+        rows: number;
+        columns: number;
+    };
+}
+export declare const Skeleton: React.FC<SkeletonProps>;

package/dist/packages/Skeleton/index.js

@@ -0,0 +1,91 @@
+import { jsx as E } from "react/jsx-runtime";
+import { SkeletonRender as F } from "./components/SkeletonRender/SkeletonRender.js";
+import G from "./hooks/useResponsiveImages.js";
+import J from "./utils/createStyleContainers.js";
+import K from "./utils/createStyleTable.js";
+import L from "./utils/createStyleCell.js";
+import M from "./utils/createStyleAnimation.js";
+const $ = (h) => {
+  const {
+    width: s,
+    height: i = "1em",
+    margin: l,
+    padding: g,
+    border: a,
+    borderColor: c,
+    borderRadius: y,
+    circle: C,
+    backgroundColor: m = "#ccc",
+    color: b,
+    cursor: d,
+    placeholder: S,
+    placeholderPosition: o,
+    animation: t,
+    animationColor: w,
+    animationDuration: v,
+    count: r = 0,
+    responsiveImage: p,
+    responsiveImageSSR: f,
+    table: e = { rows: 0, columns: 0 }
+  } = h, { skeletonContainer: x, widthSkeletonContainer: k, srcWidth: R, srcHeight: A } = G(p, f), u = {
+    left: "flex-start",
+    top: "flex-start",
+    center: "center",
+    right: "flex-end",
+    bottom: "flex-end"
+  }, I = o ? u[o.horizontal] : void 0, P = o ? u[o.vertical] : void 0, n = (q) => Array.from({ length: q }, (N, B) => B), j = n(r), T = n(e.rows), z = n(e.columns), D = J({
+    width: s,
+    height: i,
+    margin: l,
+    padding: g,
+    border: a,
+    borderColor: c,
+    borderRadius: y,
+    circle: C,
+    backgroundColor: m,
+    color: b,
+    cursor: d,
+    placeholderPosition: o,
+    justifyContent: I,
+    alignItems: P,
+    animation: t,
+    count: r,
+    responsiveImage: p,
+    responsiveImageSSR: f,
+    widthSkeletonContainer: k,
+    srcWidth: R,
+    srcHeight: A
+  }), H = K({
+    width: s,
+    cursor: d,
+    animation: t
+  }), W = L({
+    height: i,
+    margin: l,
+    border: a,
+    borderColor: c,
+    backgroundColor: m,
+    table: e
+  }), _ = M(w, v);
+  return /* @__PURE__ */ E(
+    F,
+    {
+      count: r,
+      wrappers: j,
+      rows: e.rows,
+      tableRows: T,
+      columns: e.columns,
+      tableColumns: z,
+      skeletonContainer: x,
+      placeholder: S,
+      styleContainers: D,
+      styleTable: H,
+      styleCell: W,
+      styleAnimation: _,
+      animation: t
+    }
+  );
+};
+export {
+  $ as Skeleton
+};

package/dist/packages/Skeleton/types/types.d.ts

@@ -0,0 +1,42 @@
+export interface ResponsiveImage {
+    srcWidth: number;
+    srcHeight: number;
+    breakIn?: number;
+}
+export type NumberStringUndefined = number | string | undefined;
+export interface StyleContainers {
+    position: 'relative' | undefined;
+    display: 'flex' | undefined;
+    justifyContent: string | undefined;
+    alignItems: string | undefined;
+    width: NumberStringUndefined;
+    height: NumberStringUndefined;
+    margin: NumberStringUndefined;
+    padding: number | undefined;
+    paddingTop: string | undefined;
+    border: '1px solid' | undefined;
+    borderColor: string | undefined;
+    borderRadius: NumberStringUndefined;
+    backgroundColor: string;
+    color: string | undefined;
+    cursor: 'progress' | undefined;
+}
+export interface StyleTable {
+    position: 'relative' | undefined;
+    display: 'block';
+    width: NumberStringUndefined;
+    cursor: 'progress' | undefined;
+}
+export interface StyleCell {
+    display: 'inline-block';
+    width: NumberStringUndefined;
+    height: number | string;
+    margin: number | 'auto';
+    border: '1px solid' | undefined;
+    borderColor: string | undefined;
+    backgroundColor: string;
+}
+export interface StyleAnimation {
+    backgroundColor: string | '#ddd';
+    animationDuration: string | '3000ms';
+}

package/dist/packages/Skeleton/types/types.js

@@ -0,0 +1 @@
+

package/dist/packages/Skeleton/utils/createStyleAnimation.d.ts

@@ -0,0 +1,7 @@
+import { StyleAnimation } from '../types/types';
+
+interface CreateStyleAnimation {
+    (animationColor?: string, animationDuration?: number): StyleAnimation;
+}
+declare const createStyleAnimation: CreateStyleAnimation;
+export default createStyleAnimation;

package/dist/packages/Skeleton/utils/createStyleAnimation.js

@@ -0,0 +1,7 @@
+const o = (e, t) => ({
+  backgroundColor: e ?? "#ddd",
+  animationDuration: t ? `${t}ms` : "3000ms"
+});
+export {
+  o as default
+};

package/dist/packages/Skeleton/utils/createStyleCell.d.ts

@@ -0,0 +1,18 @@
+import { StyleCell } from '../types/types';
+
+interface CreateStyleCellParams {
+    height: number | string;
+    margin: number | 'auto' | undefined;
+    border: true | undefined;
+    borderColor: string | undefined;
+    backgroundColor: string;
+    table: {
+        rows: number;
+        columns: number;
+    };
+}
+interface CreateStyleCell {
+    (params: CreateStyleCellParams): StyleCell;
+}
+declare const createStyleCell: CreateStyleCell;
+export default createStyleCell;

package/dist/packages/Skeleton/utils/createStyleCell.js

@@ -0,0 +1,19 @@
+const s = ({
+  height: e,
+  margin: l,
+  border: o,
+  borderColor: t,
+  backgroundColor: d,
+  table: c
+}) => ({
+  display: "inline-block",
+  backgroundColor: d,
+  width: l !== "auto" && l ? `calc(100% / ${c.columns} - ${3 * l}px)` : `calc(100% / ${c.columns} - 6px)`,
+  height: e,
+  margin: l ?? 2,
+  border: o ? "1px solid" : void 0,
+  borderColor: o && (t ?? "#000")
+});
+export {
+  s as default
+};

package/dist/packages/Skeleton/utils/createStyleContainers.d.ts

@@ -0,0 +1,33 @@
+import { ResponsiveImage, StyleContainers, NumberStringUndefined } from '../types/types';
+
+interface CreateStyleContainerParams {
+    width: NumberStringUndefined;
+    height: number | string;
+    margin: NumberStringUndefined;
+    padding: number | undefined;
+    border: true | undefined;
+    borderColor: string | undefined;
+    borderRadius: number | undefined;
+    circle: true | undefined;
+    backgroundColor: string;
+    color: string | undefined;
+    cursor: true | undefined;
+    placeholderPosition: {
+        horizontal: string;
+        vertical: string;
+    } | undefined;
+    justifyContent: string | undefined;
+    alignItems: string | undefined;
+    animation: true | undefined;
+    count: number;
+    responsiveImage: ResponsiveImage | ResponsiveImage[] | undefined;
+    responsiveImageSSR: ResponsiveImage | undefined;
+    widthSkeletonContainer: number;
+    srcWidth: number | undefined;
+    srcHeight: number | undefined;
+}
+interface CreateStyleContainer {
+    (params: CreateStyleContainerParams): StyleContainers;
+}
+declare const createStyleContainers: CreateStyleContainer;
+export default createStyleContainers;

package/dist/packages/Skeleton/utils/createStyleContainers.js

@@ -0,0 +1,45 @@
+const q = ({
+  width: e,
+  height: s,
+  margin: i,
+  padding: a,
+  border: t,
+  borderColor: c,
+  borderRadius: d,
+  circle: v,
+  backgroundColor: l,
+  color: p,
+  cursor: g,
+  placeholderPosition: h,
+  justifyContent: u,
+  alignItems: x,
+  animation: C,
+  count: f,
+  responsiveImage: b,
+  responsiveImageSSR: o,
+  widthSkeletonContainer: y,
+  srcWidth: r,
+  srcHeight: n
+}) => {
+  const H = f > 0 ? "0 0 5px 0" : void 0, T = v ? "50%" : void 0, $ = b ? r && n && y * n / r : s, j = o ? void 0 : $, k = o ? `${o.srcHeight * 100 / o.srcWidth}%` : void 0;
+  return {
+    position: C ? "relative" : void 0,
+    width: e,
+    height: j,
+    margin: i || H,
+    padding: a,
+    paddingTop: k,
+    border: t ? "1px solid" : void 0,
+    borderColor: t && (c ?? "#000"),
+    borderRadius: d || T,
+    backgroundColor: l,
+    color: p,
+    cursor: g ? "progress" : void 0,
+    display: h ? "flex" : void 0,
+    justifyContent: u,
+    alignItems: x
+  };
+};
+export {
+  q as default
+};

package/dist/packages/Skeleton/utils/createStyleTable.d.ts

@@ -0,0 +1,12 @@
+import { StyleTable, NumberStringUndefined } from '../types/types';
+
+interface CreateStyleTableParams {
+    width: NumberStringUndefined;
+    animation: true | undefined;
+    cursor: true | undefined;
+}
+interface CreateStyleTable {
+    (params: CreateStyleTableParams): StyleTable;
+}
+declare const createStyleTable: CreateStyleTable;
+export default createStyleTable;

package/dist/packages/Skeleton/utils/createStyleTable.js

@@ -0,0 +1,9 @@
+const t = ({ width: e, animation: o, cursor: r }) => ({
+  display: "block",
+  width: e,
+  position: o ? "relative" : void 0,
+  cursor: r ? "progress" : void 0
+});
+export {
+  t as default
+};

package/package.json

@@ -2,7 +2,7 @@
   "name": "@plurix/ecom-components",
   "author": "Plurix",
   "private": false,
-  "version": "1.10.0",
+  "version": "1.10.7",
   "type": "module",
   "main": "dist/main.js",
   "types": "dist/main.d.ts",