@caseparts-org/caseblocks 0.0.119 → 0.0.120

package/dist/main-client.d.ts

@@ -24,6 +24,8 @@ export { AddToCart } from './molecules/AddToCart/AddToCart';
 export type { CategoryWithChildren as MainCategory, Category } from './molecules/CategoryNav/CategoryNav';
 export { Modal } from './molecules/Modal/Modal';
 export type { ModalProps } from './molecules/Modal/Modal';
+export { ImageViewer } from './molecules/ImageViewer/ImageViewer';
+export type { ImageViewerProps } from './molecules/ImageViewer/ImageViewer';
 export { MainNav } from './organisms/MainNav/MainNav';
 export type { MainNavProps } from './organisms/MainNav/MainNav';
 export { ChipSelector } from './organisms/ChipSelector/ChipSelector';

package/dist/main-client.js

@@ -6,17 +6,17 @@ import { Icon as l } from "./atoms/Icon/Icon.js";
 import { Root as d } from "./atoms/Root/Root.js";
 import { Separator as C } from "./atoms/Separator/Separator.js";
 import { Text as k } from "./atoms/Text/Text.js";
-import { Input as B } from "./atoms/Input/Input.js";
+import { Input as S } from "./atoms/Input/Input.js";
 import { Link as v } from "./atoms/Link/Link.js";
 import { linkClassName as L } from "./atoms/Link/linkClassName.js";
 import { configureLink as h, routerOverride as s } from "./atoms/Link/configureLink.js";
 import { LinkButton as F } from "./atoms/LinkButton/LinkButton.js";
 import { configureImage as N } from "./atoms/Image/configureImage.js";
-import { Logo as y } from "./molecules/Logo/Logo.js";
-import { SearchBox as w } from "./molecules/SearchBox/SearchBox.js";
-import { QuantityInput as G } from "./molecules/QuantityInput/QuantityInput.js";
-import { Pricing as Q } from "./molecules/Pricing/Pricing.js";
-import { Availability as V } from "./molecules/Availability/Availability.js";
+import { Logo as w } from "./molecules/Logo/Logo.js";
+import { SearchBox as H } from "./molecules/SearchBox/SearchBox.js";
+import { QuantityInput as z } from "./molecules/QuantityInput/QuantityInput.js";
+import { Pricing as O } from "./molecules/Pricing/Pricing.js";
+import { Availability as R } from "./molecules/Availability/Availability.js";
 import { Avatar as q } from "./molecules/Avatar/Avatar.js";
 import { BannerCard as E } from "./molecules/BannerCard/BannerCard.js";
 import { CardLink as K } from "./molecules/CardLink/CardLink.js";
@@ -32,47 +32,49 @@ import { ToggleView as io } from "./molecules/ToggleView/ToggleView.js";
 import { CartSlideInPanel as uo } from "./molecules/Cart/CartSlideInPanel.js";
 import { StatefulButton as Co } from "./molecules/StatefulButton/StatefulButton.js";
 import { AnimatedCheckMark as ko } from "./molecules/StatefulButton/AnimatedCheckmark.js";
-import { AddToCart as Bo } from "./molecules/AddToCart/AddToCart.js";
+import { AddToCart as So } from "./molecules/AddToCart/AddToCart.js";
 import { Modal as vo } from "./molecules/Modal/Modal.js";
-import { MainNav as Lo } from "./organisms/MainNav/MainNav.js";
-import { ChipSelector as ho } from "./organisms/ChipSelector/ChipSelector.js";
-import { Product as To } from "./organisms/Product/Product.js";
-import { Carousel as Mo } from "./organisms/Carousel/Carousel.js";
-import { Footer as bo } from "./organisms/Footer/Footer.js";
+import { ImageViewer as Lo } from "./molecules/ImageViewer/ImageViewer.js";
+import { MainNav as ho } from "./organisms/MainNav/MainNav.js";
+import { ChipSelector as To } from "./organisms/ChipSelector/ChipSelector.js";
+import { Product as Mo } from "./organisms/Product/Product.js";
+import { Carousel as bo } from "./organisms/Carousel/Carousel.js";
+import { Footer as yo } from "./organisms/Footer/Footer.js";
 export {
   fo as Account,
-  Bo as AddToCart,
+  So as AddToCart,
   ko as AnimatedCheckMark,
-  V as Availability,
+  R as Availability,
   q as Avatar,
   E as BannerCard,
   W as Breadcrumbs,
   e as Button,
   K as CardLink,
-  Mo as Carousel,
+  bo as Carousel,
   uo as CartSlideInPanel,
   ao as Chip,
-  ho as ChipSelector,
+  To as ChipSelector,
   f as Column,
   p as Flex,
-  bo as Footer,
+  yo as Footer,
   x as Grid,
   n as Head,
   _ as HorizontalScroll,
   l as Icon,
-  B as Input,
+  Lo as ImageViewer,
+  S as Input,
   v as Link,
   F as LinkButton,
-  y as Logo,
-  Lo as MainNav,
+  w as Logo,
+  ho as MainNav,
   vo as Modal,
   Y as NotFound,
   po as Popover,
-  Q as Pricing,
-  To as Product,
-  G as QuantityInput,
+  O as Pricing,
+  Mo as Product,
+  z as QuantityInput,
   d as Root,
-  w as SearchBox,
+  H as SearchBox,
   C as Separator,
   oo as SlideInPanel,
   Co as StatefulButton,

package/dist/molecules/Account/Account.js

@@ -1,4 +1,4 @@
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { jsx as n, jsxs as t } from "react/jsx-runtime";
 import { getHideAtStyles as m } from "../../atoms/HideAt.js";
 import { Icon as f } from "../../atoms/Icon/Icon.js";
 import { Text as c } from "../../atoms/Text/Text.js";
@@ -16,7 +16,7 @@ function y(i) {
   return i.account !== void 0;
 }
 function j(i) {
-  return i.isAccountLoading ? /* @__PURE__ */ t("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ t(_, { ...i }) : /* @__PURE__ */ t(N, { ...i });
+  return i.isAccountLoading ? /* @__PURE__ */ n("div", { className: o.placeholder }) : y(i) ? /* @__PURE__ */ n(_, { ...i }) : /* @__PURE__ */ n(N, { ...i });
 }
 function _(i) {
   const {
@@ -27,17 +27,17 @@ function _(i) {
     isAccountLoading: h,
     ...l
   } = i;
-  return a ? /* @__PURE__ */ t(
+  return a ? /* @__PURE__ */ n(
     A,
     {
       position: "bottom right",
-      trigger: /* @__PURE__ */ n(
+      trigger: /* @__PURE__ */ t(
         "div",
         {
           className: g(o.loggedIn, m(s), r),
           ...l,
           children: [
-            /* @__PURE__ */ n(
+            /* @__PURE__ */ t(
               d,
               {
                 flexDirection: "column",
@@ -45,30 +45,30 @@ function _(i) {
                 hideAt: ["sm", "md"],
                 className: o.customer,
                 children: [
-                  /* @__PURE__ */ n(c, { size: "xxs", children: [
+                  /* @__PURE__ */ t(c, { size: "xxs", children: [
                     "Acct: ",
                     e == null ? void 0 : e.number
                   ] }),
-                  /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
+                  /* @__PURE__ */ t(c, { size: "sm", variant: "display", colorToken: "links", children: [
                     "Hello ",
                     e == null ? void 0 : e.name
                   ] })
                 ]
               }
             ),
-            e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
+            e.avatar ?? (e.initials ? /* @__PURE__ */ n(u, { initials: e.initials }) : null)
           ]
         }
       ),
       children: a
     }
-  ) : /* @__PURE__ */ n(
+  ) : /* @__PURE__ */ t(
     "div",
     {
       className: g(o.loggedIn, m(s), r),
       ...l,
       children: [
-        /* @__PURE__ */ n(
+        /* @__PURE__ */ t(
           d,
           {
             flexDirection: "column",
@@ -76,18 +76,15 @@ function _(i) {
             hideAt: ["sm", "md"],
             className: o.customer,
             children: [
-              /* @__PURE__ */ n(c, { size: "xxs", children: [
-                "Acct: ",
-                e == null ? void 0 : e.number
-              ] }),
-              /* @__PURE__ */ n(c, { size: "sm", variant: "display", colorToken: "links", children: [
+              /* @__PURE__ */ n(c, { size: "xxs", children: e == null ? void 0 : e.number }),
+              /* @__PURE__ */ t(c, { size: "sm", variant: "display", colorToken: "links", children: [
                 "Hello ",
                 e == null ? void 0 : e.name
               ] })
             ]
           }
         ),
-        e.avatar ?? (e.initials ? /* @__PURE__ */ t(u, { initials: e.initials }) : null)
+        e.avatar ?? (e.initials ? /* @__PURE__ */ n(u, { initials: e.initials }) : null)
       ]
     }
   );
@@ -101,7 +98,7 @@ function N(i) {
     isAccountLoading: h,
     ...l
   } = i;
-  return /* @__PURE__ */ n(
+  return /* @__PURE__ */ t(
     d,
     {
       flexDirection: "row",
@@ -113,7 +110,7 @@ function N(i) {
         r
       ),
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ n(
           p,
           {
             onClick: e,
@@ -123,7 +120,7 @@ function N(i) {
             children: "Sign In / Register"
           }
         ),
-        /* @__PURE__ */ t(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
+        /* @__PURE__ */ n(f, { iconKey: "fa-kit fa-user-anon", size: "lg", hideAt: "lg" })
       ]
     }
   );

package/dist/molecules/ImageViewer/ImageViewer.d.ts

@@ -0,0 +1,8 @@
+export interface ImageViewerProps {
+    imgSrc: string;
+    zoomFactor?: number;
+    minZoomScale?: number;
+    maxZoomScale?: number;
+}
+export declare function ImageViewer({ imgSrc, zoomFactor, // Default 10% per wheel notch
+minZoomScale, maxZoomScale, }: ImageViewerProps): import("react/jsx-runtime").JSX.Element;

package/dist/molecules/ImageViewer/ImageViewer.js

@@ -0,0 +1,123 @@
+import { jsx as U } from "react/jsx-runtime";
+import { useRef as o, useEffect as Q } from "react";
+function Z({
+  imgSrc: j,
+  zoomFactor: O = 1.1,
+  // Default 10% per wheel notch
+  minZoomScale: x = 1,
+  maxZoomScale: z = 5
+  // 500%
+}) {
+  const D = o(null), a = o(null), d = o(null), h = o(1), g = o(0), p = o(0), P = o(null), y = o(!1), A = o(0), b = o(0), W = o(0), B = o(0), R = o(!1), u = o(/* @__PURE__ */ new Map()), T = o(0), q = o(1), L = o({ x: 0, y: 0 });
+  Q(() => {
+    const t = a.current, n = D.current;
+    if (!t || !n) return;
+    const s = () => {
+      const e = n.getBoundingClientRect();
+      t.height = e.height, t.width = e.width;
+      const c = t.getContext("2d");
+      c && (c.setTransform(1, 0, 0, 1, 0, 0), d.current = c, k());
+    };
+    s();
+    const r = new ResizeObserver(s);
+    return r.observe(n), s(), () => r.disconnect();
+  }, []);
+  const k = () => {
+    const t = a.current;
+    if (!d.current || !t) return;
+    d.current.clearRect(0, 0, t.width, t.height);
+    const n = new Image();
+    n.crossOrigin = "anonymous", n.src = j, n.onload = () => {
+      P.current = n, Y();
+    };
+  }, Y = () => {
+    const t = a.current, n = P.current;
+    if (!d.current || !t || !n) return;
+    const s = n.width / 2, r = n.height / 2, e = t.width / 2, c = t.height / 2, i = e - s, f = c - r;
+    h.current = 1, g.current = i, p.current = f, v();
+  }, E = (t) => {
+    const n = a.current;
+    if (!d.current || !n) return;
+    const s = t.deltaY < 0 ? O : 1 / O, r = h.current;
+    let e = r * s;
+    if (e = Math.max(x, Math.min(z, e)), h.current = e, e === x) {
+      Y();
+      return;
+    }
+    const { x: c, y: i } = X(t, n), f = (c - g.current) / r, w = (i - p.current) / r, m = c - f * e, l = i - w * e;
+    g.current = m, p.current = l, v();
+  }, H = (t) => {
+    var r;
+    const n = a.current;
+    if (!d.current || !n) return;
+    (r = a.current) == null || r.setPointerCapture(t.pointerId);
+    const s = X(t, n);
+    if (u.current.set(t.pointerId, s), u.current.size === 2) {
+      R.current = !0, y.current = !1;
+      const [e, c] = Array.from(u.current.values()), i = e.x - c.x, f = e.y - c.y, w = Math.sqrt(i * i + f * f);
+      T.current = w, q.current = h.current;
+      const m = (e.x + c.x) / 2, l = (e.y + c.y) / 2, M = (m - g.current) / h.current, C = (l - p.current) / h.current;
+      L.current = { x: M, y: C }, R.current = !0;
+    } else if (u.current.size === 1) {
+      const [e] = Array.from(u.current.values());
+      A.current = e.x, b.current = e.y, W.current = g.current, B.current = p.current, y.current = !0;
+    }
+  }, S = (t) => {
+    const n = a.current;
+    if (!d.current || !n) return;
+    const s = X(t, n);
+    if (u.current.has(t.pointerId)) {
+      if (u.current.set(t.pointerId, s), R.current && u.current.size === 2) {
+        const [r, e] = Array.from(u.current.values()), c = r.x - e.x, i = r.y - e.y, f = Math.sqrt(c * c + i * i), w = T.current;
+        if (w === 0) return;
+        const m = f / w;
+        let l = q.current * m;
+        if (l = Math.max(x, Math.min(z, l)), l === x) {
+          Y();
+          return;
+        }
+        const M = (r.x + e.x) / 2, C = (r.y + e.y) / 2, { x: G, y: J } = L.current, K = M - G * l, N = C - J * l;
+        h.current = l, g.current = K, p.current = N, v();
+      } else if (y.current && u.current.size === 1) {
+        const r = n.getBoundingClientRect(), e = t.clientX - r.left, c = t.clientY - r.top, i = e - A.current, f = c - b.current;
+        g.current = W.current + i, p.current = B.current + f, v();
+      }
+    }
+  }, I = (t) => {
+    u.current.delete(t.pointerId), u.current.size < 2 && (R.current = !1), u.current.size === 0 && (y.current = !1);
+    const n = a.current;
+    !d.current || !n || n.releasePointerCapture(t.pointerId);
+  }, V = I, F = I, X = (t, n) => {
+    const s = n.getBoundingClientRect();
+    return {
+      x: t.clientX - s.left,
+      y: t.clientY - s.top
+    };
+  }, v = () => {
+    const t = a.current, n = d.current, s = P.current;
+    !t || !n || !s || (n.setTransform(1, 0, 0, 1, 0, 0), n.clearRect(0, 0, t.width, t.height), n.setTransform(
+      h.current,
+      0,
+      0,
+      h.current,
+      g.current,
+      p.current
+    ), n.drawImage(s, 0, 0));
+  };
+  return /* @__PURE__ */ U("div", { ref: D, style: { width: "100%", height: "100%" }, children: /* @__PURE__ */ U(
+    "canvas",
+    {
+      ref: a,
+      style: { width: "100%", height: "100%", display: "block", touchAction: "none" },
+      onWheel: E,
+      onPointerDown: H,
+      onPointerMove: S,
+      onPointerUp: I,
+      onPointerLeave: V,
+      onPointerCancel: F
+    }
+  ) });
+}
+export {
+  Z as ImageViewer
+};

package/dist/molecules/ImageViewer/ImageViewer.stories.d.ts

@@ -0,0 +1,6 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ImageViewer } from './ImageViewer';
+declare const meta: Meta<typeof ImageViewer>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;

package/dist/molecules/ImageViewer/ImageViewer.stories.js

@@ -0,0 +1,30 @@
+import { jsx as e } from "react/jsx-runtime";
+import { ImageViewer as o } from "./ImageViewer.js";
+const r = {
+  title: "Case Parts/Molecules/ImageViewer",
+  component: o,
+  parameters: {
+    layout: "fullscreen"
+  },
+  argTypes: {
+    imgSrc: { control: "text" },
+    zoomFactor: { control: { type: "number", min: 1, max: 2, step: 0.01 } },
+    minZoomScale: { control: { type: "number", min: 0.1, max: 2, step: 0.1 } },
+    maxZoomScale: { control: { type: "number", min: 2, max: 10, step: 0.5 } }
+  },
+  decorators: [
+    (t) => /* @__PURE__ */ e("div", { style: { height: "90dvh", width: "100%" }, children: /* @__PURE__ */ e(t, {}) })
+  ]
+}, c = {
+  name: "Default",
+  args: {
+    imgSrc: "https://cdnimg.webstaurantstore.com/images/products/large/573147/2989461.jpg",
+    zoomFactor: 1.1,
+    minZoomScale: 1,
+    maxZoomScale: 5
+  }
+};
+export {
+  c as Default,
+  r as default
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.119",
+  "version": "0.0.120",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",