@caseparts-org/caseblocks 0.0.8 → 0.0.10

package/dist/assets/ChipSelector.css

@@ -1 +1 @@
-._chipSelector_1k7dl_1{column-gap:var(--spacing-1);row-gap:var(--spacing-0-75);flex-wrap:wrap}
+._chipSelector_butnu_1{column-gap:var(--spacing-0-5);row-gap:var(--spacing-0-5);flex-wrap:wrap}

package/dist/assets/ToggleView.css

@@ -1 +1 @@
-._toggleView_1qbhe_1{flex-wrap:wrap}._toggleOption_1qbhe_5{border:none;padding:var(--spacing-0-25) var(--spacing-1);gap:var(--spacing-0-125);cursor:pointer;border:1px solid var(--border-border-primary)}._toggleOption_1qbhe_5._selected_1qbhe_13{color:var(--text-text-invert);border:1px solid var(--color-brand-primary-primary-teal-blue);background-color:var(--color-brand-primary-primary-teal-blue)}._toggleOption_1qbhe_5._selected_1qbhe_13 path{fill:var(--icons-icon-invert)}
+._toggleView_1voum_1{flex-wrap:wrap}._toggleOption_1voum_5{border:none;padding:var(--spacing-0-125) var(--spacing-0-5);gap:var(--spacing-0-125);cursor:pointer;border-top:1px solid var(--border-border-primary);border-bottom:1px solid var(--border-border-primary)}._toggleOption_1voum_5._selected_1voum_15{color:var(--text-text-invert);border-color:var(--color-brand-primary-primary-teal-blue);background-color:var(--color-brand-primary-primary-teal-blue)}._toggleOption_1voum_5._selected_1voum_15 path{fill:var(--icons-icon-invert)}._toggleOption_1voum_5:first-child{border-left:1px solid var(--border-border-primary);border-radius:2px 0 0 2px}._toggleOption_1voum_5:last-child{border-right:1px solid var(--border-border-primary);border-radius:0 2px 2px 0}._toggleOption_1voum_5:not(:last-child){border-right:1px solid var(--border-border-primary)}._toggleOption_1voum_5._selected_1voum_15+._toggleOption_1voum_5{border-left:none}

package/dist/molecules/ToggleView/ToggleView.js

@@ -2,18 +2,18 @@ import { jsx as e, jsxs as d } from "react/jsx-runtime";
 import g from "react";
 import { Flex as f } from "../../atoms/Flex/Flex.js";
 import { Icon as l } from "../../atoms/Icon/Icon.js";
-import { Text as b } from "../../atoms/Text/Text.js";
-import { getHideAtStyles as x } from "../../atoms/HideAt.js";
+import { Text as x } from "../../atoms/Text/Text.js";
+import { getHideAtStyles as O } from "../../atoms/HideAt.js";
 import { c as p } from "../../clsx-OuTLNxxd.js";
-import '../../assets/ToggleView.css';const O = "_toggleView_1qbhe_1", y = "_toggleOption_1qbhe_5", I = "_selected_1qbhe_13", m = {
-  toggleView: O,
-  toggleOption: y,
-  selected: I
-}, _ = {
+import '../../assets/ToggleView.css';const y = "_toggleView_1voum_1", I = "_toggleOption_1voum_5", _ = "_selected_1voum_15", m = {
+  toggleView: y,
+  toggleOption: I,
+  selected: _
+}, T = {
   grid: "GRID",
   list: "LIST",
   table: "TABLE"
-}, T = {
+}, b = {
   grid: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-grid-2", size: "sm" }),
   list: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-list-ul", size: "sm" }),
   table: /* @__PURE__ */ e(l, { iconKey: "fa-regular fa-table-cells", size: "sm" })
@@ -31,7 +31,7 @@ function s({
     {
       flexDirection: "row",
       alignItems: "center",
-      className: p(m.toggleView, x(a), n),
+      className: p(m.toggleView, O(a), n),
       ...r,
       children: g.Children.map(o, (i) => g.isValidElement(i) ? g.cloneElement(i, {
         isSelected: i.props.id === c,
@@ -53,8 +53,8 @@ function w({
     u,
     {
       id: c,
-      label: _[t],
-      icon: T[t],
+      label: T[t],
+      icon: b[t],
       isSelected: n,
       onClick: o,
       ...r
@@ -87,7 +87,7 @@ function u({
       ...i,
       children: [
         n,
-        /* @__PURE__ */ e(b, { size: "xxs", children: t })
+        /* @__PURE__ */ e(x, { size: "xxs", children: t })
       ]
     }
   );

package/dist/molecules/ToggleView/ToggleView.stories.js

@@ -9,7 +9,7 @@ const l = {
   tags: ["autodocs"]
 }, r = {
   args: {
-    selectedId: "table",
+    selectedId: "grid",
     onToggle: (o) => console.log(`Option ${o} selected`),
     children: [
       /* @__PURE__ */ e(t.Option, { id: "grid", variant: "grid" }, "grid"),

package/dist/organisms/ChipSelector/ChipSelector.js

@@ -1,27 +1,27 @@
-import { jsx as l } from "react/jsx-runtime";
+import { jsx as o } from "react/jsx-runtime";
 import { c as m } from "../../clsx-OuTLNxxd.js";
 import { getHideAtStyles as n } from "../../atoms/HideAt.js";
 import { Flex as s } from "../../atoms/Flex/Flex.js";
 import { Chip as f } from "../../molecules/Chip/Chip.js";
-import '../../assets/ChipSelector.css';const x = "_chipSelector_1k7dl_1", i = {
+import '../../assets/ChipSelector.css';const x = "_chipSelector_butnu_1", u = {
   chipSelector: x
 };
 function g({
-  chips: o,
+  chips: l,
   onChipSelect: e,
   onChipDismiss: r,
   className: a,
-  hideAt: d,
-  ...c
+  hideAt: c,
+  ...d
 }) {
-  return /* @__PURE__ */ l(
+  return /* @__PURE__ */ o(
     s,
     {
       flexDirection: "row",
       alignItems: "center",
-      className: m(i.chipSelector, n(d), a),
-      ...c,
-      children: o.map((t) => /* @__PURE__ */ l(
+      className: m(u.chipSelector, n(c), a),
+      ...d,
+      children: l.map((t) => /* @__PURE__ */ o(
         f,
         {
           text: t.text,

package/dist/organisms/ChipSelector/ChipSelector.stories.js

@@ -1,6 +1,6 @@
 import { jsx as i } from "react/jsx-runtime";
 import { ChipSelector as t } from "./ChipSelector.js";
-const a = {
+const s = {
   title: "Case Parts/Organisms/ChipSelector",
   component: t,
   parameters: {
@@ -9,17 +9,34 @@ const a = {
   },
   // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
   tags: ["autodocs"]
-}, o = {
+}, c = {
   args: {
     chips: [
       { id: 1, text: "Chip 1", variant: "selectable", selected: !0 },
       { id: 2, text: "Chip 2", variant: "selectable", selected: !0 },
-      { id: 3, text: "Chip 3", variant: "selectable", selected: !0 }
+      { id: 3, text: "Chip 3", variant: "selectable", selected: !0 },
+      { id: 4, text: "Chip 4", variant: "selectable", selected: !0 },
+      { id: 5, text: "Chip 5", variant: "selectable", selected: !0 },
+      { id: 6, text: "Chip 6", variant: "selectable", selected: !0 },
+      { id: 7, text: "Chip 7", variant: "selectable", selected: !0 },
+      { id: 8, text: "Chip 8", variant: "selectable", selected: !0 },
+      { id: 9, text: "Chip 9", variant: "selectable", selected: !0 },
+      { id: 10, text: "Chip 10", variant: "selectable", selected: !0 },
+      { id: 11, text: "Chip 11", variant: "selectable", selected: !0 },
+      { id: 12, text: "Chip 12", variant: "selectable", selected: !0 },
+      { id: 13, text: "Chip 13", variant: "selectable", selected: !1 },
+      { id: 14, text: "Chip 14", variant: "selectable", selected: !1 },
+      { id: 15, text: "Chip 15", variant: "selectable", selected: !1 },
+      { id: 16, text: "Chip 16", variant: "selectable", selected: !1 },
+      { id: 17, text: "Chip 17", variant: "selectable", selected: !0 },
+      { id: 18, text: "Chip 18", variant: "selectable", selected: !0 },
+      { id: 19, text: "Chip 19", variant: "selectable", selected: !1 },
+      { id: 20, text: "Chip 20", variant: "selectable", selected: !1 }
     ],
     onChipSelect: (e) => console.log(`Chip ${e} selected`),
     onChipDismiss: (e) => console.log(`Chip ${e} dismissed`)
   }
-}, c = {
+}, d = {
   render: () => /* @__PURE__ */ i(
     t,
     {
@@ -45,7 +62,7 @@ const a = {
   )
 };
 export {
-  o as AllProps,
-  c as Variants,
-  a as default
+  c as AllProps,
+  d as Variants,
+  s as default
 };

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.d.ts

@@ -0,0 +1,20 @@
+import { default as React, CSSProperties, ComponentType } from 'react';
+type SpinZoom360Props = {
+    images: string[];
+    defaultIndex?: number;
+    disableSpin?: boolean;
+    disableZoom?: boolean;
+    clickZoomFactor?: number;
+    scrollZoomFactor?: number;
+    maxZoomLevel?: number;
+    spinOverlayComponent?: ComponentType<{
+        style?: CSSProperties;
+    }>;
+    rotationSpeedThreshold?: number;
+    onImageChange?: (_info: {
+        index: number;
+        src: string;
+    }) => void;
+};
+declare const SpinZoomViewer: React.FC<SpinZoom360Props>;
+export default SpinZoomViewer;

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.js

@@ -0,0 +1,292 @@
+import { jsxs as rt, jsx as k } from "react/jsx-runtime";
+import { useState as f, useRef as x, useEffect as G } from "react";
+import { Text as lt } from "../../atoms/Text/Text.js";
+const ut = 4, dt = ({
+  images: Y,
+  defaultIndex: M = 0,
+  disableSpin: w = !1,
+  disableZoom: P = !1,
+  clickZoomFactor: D = 1.5,
+  scrollZoomFactor: B = 1.1,
+  maxZoomLevel: m = 5,
+  spinOverlayComponent: U,
+  rotationSpeedThreshold: O = 15,
+  onImageChange: H = () => {
+  }
+}) => {
+  const [J, tt] = f(!1), [X, N] = f(M), [S, L] = f(!1), [Q, R] = f(!1), [Z, T] = f(!1), [c, h] = f(!1), [l, p] = f(1), [d, a] = f({
+    top: 0,
+    left: 0
+  }), [C, et] = f(!1), u = x(null), q = x(0), b = x({ x: 0, y: 0 }), V = x({
+    initialPosition: 0,
+    centerX: 0,
+    centerY: 0
+  }), y = x({
+    x: 0,
+    y: 0,
+    isZoomIn: !1
+  }), W = x({ x: 0, y: 0 });
+  G(() => {
+    const t = u.current;
+    return t && t.addEventListener("wheel", A, {
+      passive: !1
+    }), () => {
+      t && t.removeEventListener(
+        "wheel",
+        A,
+        { passive: !1 }
+      );
+    };
+  }, []), G(() => {
+    H == null || H({ index: X, src: Y[X] });
+  }, [X]);
+  function K(t) {
+    if (!P && "touches" in t && t.touches && t.touches.length > 1) {
+      T(!0), h(!0), R(!1), L(!1);
+      const o = t.touches[0].clientX - t.touches[1].clientX, i = t.touches[0].clientY - t.touches[1].clientY;
+      V.current.initialPosition = Math.sqrt(o * o + i * i);
+    } else c ? R(!0) : w || L(!0);
+    const e = "type" in t && t.type === "mousedown" ? t.clientX : t.touches[0].clientX, n = "type" in t && t.type === "mousedown" ? t.clientY : t.touches[0].clientY;
+    q.current = e, b.current = { x: e, y: n }, W.current = { x: e, y: n };
+  }
+  function F(t) {
+    if (!P && "touches" in t && t.touches && t.touches.length > 1) {
+      const o = t.touches[0].clientX - t.touches[1].clientX, i = t.touches[0].clientY - t.touches[1].clientY, r = Math.sqrt(o * o + i * i), I = r / V.current.initialPosition;
+      let s = l * I;
+      if (p((g) => (s = g * I, s < 1.001 ? (h(!1), a({ top: 0, left: 0 }), 1) : s >= m ? g : s)), s < m) {
+        const g = (t.touches[0].clientX + t.touches[1].clientX) / 2, E = (t.touches[0].clientY + t.touches[1].clientY) / 2, v = u.current.getBoundingClientRect();
+        a((_) => {
+          const { relX: st, relY: ct } = z(
+            g,
+            E,
+            v.left,
+            v.top
+          );
+          return j(
+            !0,
+            st,
+            ct,
+            _.left,
+            _.top,
+            I
+          );
+        });
+      }
+      V.current.initialPosition = r;
+    }
+    const e = "type" in t && t.type === "mousemove" ? t.clientX : t.touches[0].clientX, n = "type" in t && t.type === "mousemove" ? t.clientY : t.touches[0].clientY;
+    if (S) {
+      et(!0);
+      const o = e - q.current;
+      Math.abs(o) > O && (o > 0 ? N(
+        (i) => (i - 1 + Y.length) % Y.length
+      ) : N((i) => (i + 1) % Y.length), q.current = e);
+    }
+    if (Q) {
+      const o = e - b.current.x, i = n - b.current.y;
+      a({
+        top: d.top + i,
+        left: d.left + o
+      }), b.current = { x: e, y: n };
+    }
+  }
+  function $(t) {
+    L(!1), T(!1);
+    let e, n, o = 0;
+    if ("type" in t && (t.type === "mouseup" || t.type === "mouseleave"))
+      e = t.clientX, n = t.clientY, o = t.button;
+    else {
+      const s = t.changedTouches[0];
+      e = s.clientX, n = s.clientY;
+    }
+    const i = e - W.current.x, r = n - W.current.y, I = Math.hypot(i, r);
+    if (!P && Math.abs(I) < ut) {
+      if (o === 0)
+        if (l >= m)
+          h(!1), p(1), a({ top: 0, left: 0 });
+        else {
+          const s = u.current.getBoundingClientRect(), { relX: g, relY: E } = z(
+            e,
+            n,
+            s.left,
+            s.top
+          ), v = j(
+            !0,
+            g,
+            E,
+            d.left,
+            d.top,
+            D
+          );
+          a(v), p(l * D), h(!0);
+        }
+      else if (o === 1)
+        if (l / D <= 1)
+          h(!1), p(1), a({ top: 0, left: 0 });
+        else {
+          const s = u.current.getBoundingClientRect(), { relX: g, relY: E } = z(
+            e,
+            n,
+            s.left,
+            s.top
+          ), v = j(
+            !1,
+            g,
+            E,
+            d.left,
+            d.top,
+            D
+          );
+          a(v), p(l / D), h(!0);
+        }
+    }
+    R(!1);
+  }
+  function A(t) {
+    if (P)
+      return;
+    t.preventDefault(), h(!0);
+    const e = t.deltaY < 0;
+    p(e ? (n) => {
+      const o = n * B;
+      return o >= m ? m : o;
+    } : (n) => {
+      const o = n / B;
+      return o <= 1 ? (h(!1), p(1), a({ top: 0, left: 0 }), 1) : o;
+    }), y.current = {
+      x: t.clientX,
+      y: t.clientY,
+      isZoomIn: e,
+      isScrolling: !0
+    };
+  }
+  G(() => {
+    var e;
+    const t = (e = u.current) == null ? void 0 : e.getBoundingClientRect();
+    l !== 1 && l !== m && y.current.isScrolling && t && (y.current = {
+      ...y.current,
+      isScrolling: !1
+    }, a((n) => {
+      const { relX: o, relY: i } = z(
+        y.current.x,
+        y.current.y,
+        t.left,
+        t.top
+      );
+      return j(
+        y.current.isZoomIn,
+        o,
+        i,
+        n.left,
+        n.top,
+        B
+      );
+    }));
+  }, [l]);
+  function nt(t) {
+    t.preventDefault();
+  }
+  function z(t, e, n, o) {
+    const i = t - n, r = e - o;
+    return { relX: i, relY: r };
+  }
+  function j(t, e, n, o, i, r) {
+    return t ? {
+      top: n - (n - i) * r,
+      left: e - (e - o) * r
+    } : {
+      top: n - (n - i) / r,
+      left: e - (e - o) / r
+    };
+  }
+  function ot() {
+    return w && P ? "default" : c && l >= m ? "zoom-out" : S ? "grabbing" : Q ? "move" : c || w ? "zoom-in" : "grab";
+  }
+  const it = {
+    height: c && u.current ? u.current.offsetHeight * l + "px" : "100%",
+    width: c && u.current ? u.current.offsetWidth * l + "px" : "100%",
+    position: c ? "absolute" : "static",
+    top: c ? `${d.top}px` : "0",
+    left: c ? `${d.left}px` : "0",
+    objectFit: "contain",
+    touchAction: c || Z ? "none" : "auto"
+  };
+  return /* @__PURE__ */ rt(
+    "div",
+    {
+      onTouchStart: K,
+      onTouchMove: F,
+      onTouchEnd: $,
+      onMouseDown: K,
+      onMouseMove: F,
+      onMouseUp: $,
+      onMouseLeave: $,
+      onDragStart: nt,
+      onContextMenu: (t) => t.preventDefault(),
+      ref: u,
+      style: {
+        cursor: ot(),
+        width: "100%",
+        height: "100%",
+        position: "relative",
+        overflow: "hidden",
+        touchAction: c || Z ? "none" : "auto"
+      },
+      children: [
+        Y.map((t, e) => /* @__PURE__ */ k(
+          "img",
+          {
+            style: {
+              display: e === X ? "block" : "none",
+              ...e === X ? it : {}
+            },
+            src: t,
+            alt: "",
+            onContextMenu: (n) => n.preventDefault(),
+            onLoad: e === M ? () => tt(!0) : void 0
+          },
+          t
+        )),
+        U ? /* @__PURE__ */ k(
+          U,
+          {
+            style: {
+              position: "absolute",
+              opacity: S || c || C || !J || w ? "0" : ".7",
+              transition: "opacity .3s ease-in",
+              pointerEvents: "none",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)"
+            }
+          }
+        ) : /* @__PURE__ */ k(
+          "div",
+          {
+            style: {
+              backgroundColor: "#393939",
+              color: "white",
+              display: "flex",
+              flexDirection: "row",
+              alignItems: "center",
+              justifyContent: "center",
+              height: "max-content",
+              width: "max-content",
+              padding: "8px 16px",
+              left: "50%",
+              top: "50%",
+              transform: "translate(-50%, -50%)",
+              position: "absolute",
+              transition: "opacity .3s ease-in",
+              opacity: S || c || C || !J || w ? "0" : "0.7"
+            },
+            children: /* @__PURE__ */ k(lt, { size: "sm", children: "Drag to spin" })
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  dt as default
+};

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.stories.d.ts

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

package/dist/organisms/SpinZoomViewer/SpinZoomViewer.stories.js

@@ -0,0 +1,24 @@
+import { jsx as t } from "react/jsx-runtime";
+import r from "./SpinZoomViewer.js";
+const o = "1092-01", a = `https://dev.caseparts.com/graphics/ortery/web%20spin/${o}/${o}/images/lv1/`, s = [];
+for (let e = 0; e < 20; e++)
+  s.push(`${a}img${(e + 1).toString().padStart(2, "0")}.webp`);
+const n = {
+  title: "Case Parts/Organisms/SpinZoomViewer",
+  component: r,
+  tags: ["autodocs"],
+  parameters: {
+    layout: "centered"
+  }
+}, p = {
+  render: (e) => /* @__PURE__ */ t("div", { style: { height: "500px", width: "500px" }, children: /* @__PURE__ */ t(r, { ...e }) }),
+  args: {
+    defaultIndex: 3,
+    images: s,
+    maxZoomLevel: 5
+  }
+};
+export {
+  p as Default,
+  n as default
+};

package/package.json

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