@caseparts-org/caseblocks 0.0.38 → 0.0.40

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

@@ -0,0 +1,64 @@
+import { StoryObj } from '@storybook/react';
+import { StatefulButton, StatefulButtonProps } from './StatefulButton';
+/**
+ * Stories for StatefulButton.
+ * Wrapper over Button that swaps its inner content when `completed` is true.
+ * Exposes all Button props (size, variant, disabled, etc.) plus:
+ * - completed: boolean
+ * - text: label before completion
+ * - completedText: label after completion
+ */
+declare const meta: {
+    title: string;
+    component: typeof StatefulButton;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        onClick: {
+            action: string;
+            description: string;
+        };
+        completed: {
+            control: "boolean";
+            description: string;
+        };
+        text: {
+            control: "text";
+            description: string;
+        };
+        completedText: {
+            control: "text";
+            description: string;
+        };
+        disabled: {
+            control: "boolean";
+        };
+        size: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        variant: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        className: {
+            control: "text";
+        };
+    };
+    args: StatefulButtonProps;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Completed: Story;
+export declare const Disabled: Story;
+export declare const CustomText: Story;
+export declare const Interactive: Story;

package/dist/molecules/StatefulButton/StatefulButton.stories.js

@@ -0,0 +1,66 @@
+import { jsx as a } from "react/jsx-runtime";
+import d from "react";
+import { StatefulButton as l } from "./StatefulButton.js";
+const u = {
+  title: "Case Parts/Molecules/StatefulButton",
+  component: l,
+  parameters: { layout: "centered" },
+  argTypes: {
+    onClick: { action: "clicked", description: "Click handler" },
+    completed: { control: "boolean", description: "Completed (added) state" },
+    text: { control: "text", description: "Label before completion" },
+    completedText: { control: "text", description: "Label after completion" },
+    disabled: { control: "boolean" },
+    size: {
+      control: { type: "select" },
+      options: ["xxs", "xs", "sm", "md", "lg", "xl"],
+      description: "Button size"
+    },
+    variant: {
+      control: { type: "select" },
+      options: ["primary", "secondary", "cta-primary", "tertiary", "destructive"],
+      description: "Visual variant"
+    },
+    className: { control: "text" }
+  },
+  args: {
+    completed: !0,
+    text: "Add",
+    completedText: "Added!",
+    disabled: !1,
+    size: "md",
+    variant: "cta-primary"
+  },
+  tags: ["autodocs"]
+}, x = {}, f = {
+  name: "Completed State",
+  args: { completed: !0 }
+}, C = {
+  args: { disabled: !0 }
+}, b = {
+  args: { text: "Add Part", completedText: "Done" }
+}, r = (e) => {
+  const [c, t] = d.useState(!1);
+  return /* @__PURE__ */ a(
+    l,
+    {
+      ...e,
+      completed: c,
+      onClick: (n) => {
+        var o;
+        (o = e.onClick) == null || o.call(e, n), t(!0), setTimeout(() => t(!1), 1600);
+      }
+    }
+  );
+}, y = {
+  args: { text: "Add", completedText: "Added!" },
+  render: (e) => /* @__PURE__ */ a(r, { ...e })
+};
+export {
+  f as Completed,
+  b as CustomText,
+  x as Default,
+  C as Disabled,
+  y as Interactive,
+  u as default
+};

package/dist/organisms/MainNav/MainNav.js

@@ -1,9 +1,9 @@
 import { jsx as e, jsxs as n } from "react/jsx-runtime";
 import { Text as p } from "../../atoms/Text/Text.js";
 import { Link as f } from "../../atoms/Link/Link.js";
-import { Icon as k } from "../../atoms/Icon/Icon.js";
+import { Icon as b } from "../../atoms/Icon/Icon.js";
 import { Flex as s } from "../../atoms/Flex/Flex.js";
-import { Grid as w, Column as j } from "../../atoms/Grid/Grid.js";
+import { Grid as k, Column as j } from "../../atoms/Grid/Grid.js";
 import { Logo as D } from "../../molecules/Logo/Logo.js";
 import { SearchBox as d } from "../../molecules/SearchBox/SearchBox.js";
 import { HamburgerMenu as z } from "../../molecules/HamburgerMenu/HamburgerMenu.js";
@@ -11,7 +11,7 @@ import { ShoppingCart as F } from "../../molecules/Cart/Cart.js";
 import { Account as I } from "../../molecules/Account/Account.js";
 import { CategoryNav as U } from "../../molecules/CategoryNav/CategoryNav.js";
 import { c as M } from "../../clsx-OuTLNxxd.js";
-import '../../assets/MainNav.css';const Q = "_main_1199t_1", B = "_topNav_1199t_6", G = "_operations_1199t_13", H = "_search_1199t_20", K = "_siteLink_1199t_23", P = "_accountArea_1199t_27", S = "_category_1199t_39", T = "_menuList_1199t_61", i = {
+import '../../assets/MainNav.css';const Q = "_main_hvdtw_1", B = "_topNav_hvdtw_8", G = "_operations_hvdtw_15", H = "_search_hvdtw_22", K = "_siteLink_hvdtw_25", P = "_accountArea_hvdtw_29", S = "_category_hvdtw_41", T = "_menuList_hvdtw_63", i = {
   main: Q,
   topNav: B,
   operations: G,
@@ -29,18 +29,18 @@ function re({
   aboutUsRoute: _,
   accountRoute: u,
   contactRoute: l,
-  cart: N,
-  cartSubtotal: A,
-  onLoginClick: g,
+  cart: v,
+  cartSubtotal: N,
+  onLoginClick: w,
   onSearch: h,
-  onItemQtyChange: v,
-  onItemDelete: x,
-  onItemEdit: L,
-  onCheckout: C,
-  className: y,
-  ...b
+  onItemQtyChange: A,
+  onItemDelete: g,
+  onItemEdit: x,
+  onCheckout: L,
+  className: C,
+  ...y
 }) {
-  return /* @__PURE__ */ e(w, { ...b, gridWrapperClassName: M(i.main, y), children: /* @__PURE__ */ n(j, { span: 12, children: [
+  return /* @__PURE__ */ e(k, { ...y, gridWrapperClassName: M(i.main, C), children: /* @__PURE__ */ n(j, { span: 12, children: [
     /* @__PURE__ */ n(
       s,
       {
@@ -67,19 +67,19 @@ function re({
                   {
                     account: a,
                     accountRoute: u,
-                    onLoginClick: g,
+                    onLoginClick: w,
                     className: i.avatar
                   }
                 ) }),
                 /* @__PURE__ */ e(
                   F,
                   {
-                    cart: N,
-                    onItemDelete: x,
-                    onItemEdit: L,
-                    onItemQtyChange: v,
-                    onCheckout: C,
-                    subtotal: A
+                    cart: v,
+                    onItemDelete: g,
+                    onItemEdit: x,
+                    onItemQtyChange: A,
+                    onCheckout: L,
+                    subtotal: N
                   }
                 ),
                 /* @__PURE__ */ e(z, { hideAt: ["lg"], children: /* @__PURE__ */ n("ul", { className: i.menuList, children: [
@@ -90,7 +90,7 @@ function re({
                   t && t.map((c) => /* @__PURE__ */ e("li", { className: i.category, children: /* @__PURE__ */ n(f, { href: c.route, children: [
                     /* @__PURE__ */ e(p, { size: "sm", weight: "semibold", children: c.label }),
                     /* @__PURE__ */ e(
-                      k,
+                      b,
                       {
                         iconKey: "fa-solid fa-chevron-right",
                         title: "Navigate",

package/dist/organisms/Product/Product.d.ts

@@ -0,0 +1,22 @@
+import { AvailabilityProps } from '../../molecules/Availability/Availability';
+export type ProductView = "Card" | "Tile";
+export interface ProductProps extends AvailabilityProps {
+    productView: ProductView;
+    productDescription: string;
+    availDescription: string;
+    productHref: string;
+    itemKey: number;
+    partNumber: string;
+    availability: string;
+    priceLabel: string;
+    price: string;
+    imgSrc: string;
+    attributes?: {
+        label: string;
+        value: string;
+    }[];
+    className?: string;
+    onAddToCart: (_itemKey: number, _quantity: number) => void;
+    onClose?: (_itemKey: number) => void;
+}
+export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Product/Product.js

@@ -0,0 +1,113 @@
+import { jsxs as r, jsx as o } from "react/jsx-runtime";
+import { Image as N } from "../../atoms/Image/Image.js";
+import { Link as g } from "../../atoms/Link/Link.js";
+import { Text as n } from "../../atoms/Text/Text.js";
+import { Availability as I } from "../../molecules/Availability/Availability.js";
+import { Pricing as b } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as v } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as P } from "../../atoms/Icon/Icon.js";
+import { c as w } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const R = "_productCard_e649x_1", A = "_productInformation_e649x_21", D = "_purchaseInformation_e649x_27", j = "_addToCart_e649x_35", k = "_addToCartButton_e649x_38", $ = "_productTile_e649x_43", y = "_topRow_e649x_64", L = "_productData_e649x_88", q = "_purchase_e649x_27", E = "_attributeContainer_e649x_125", t = {
+  productCard: R,
+  productInformation: A,
+  purchaseInformation: D,
+  addToCart: j,
+  addToCartButton: k,
+  productTile: $,
+  topRow: y,
+  productData: L,
+  purchase: q,
+  attributeContainer: E
+};
+function X({
+  productView: z,
+  itemKey: c,
+  partNumber: a,
+  productDescription: l,
+  availDescription: m,
+  availId: d,
+  contactHref: u,
+  contactLinkBehavior: p,
+  productHref: h,
+  priceLabel: _,
+  price: e,
+  imgSrc: f,
+  attributes: i,
+  className: C,
+  onAddToCart: x,
+  onClose: T,
+  ...B
+}) {
+  return z === "Card" ? /* @__PURE__ */ r("div", { className: w(t.productCard, C), children: [
+    /* @__PURE__ */ o(N, { src: f, alt: `${a} product image` }),
+    /* @__PURE__ */ r("div", { className: t.productInformation, children: [
+      /* @__PURE__ */ o(g, { href: h, children: l }),
+      /* @__PURE__ */ r(n, { size: "sm", className: t.partNumber, children: [
+        "Part # ",
+        a
+      ] })
+    ] }),
+    /* @__PURE__ */ r("div", { className: t.purchaseInformation, children: [
+      d && /* @__PURE__ */ o(
+        I,
+        {
+          availId: d,
+          availDescription: m,
+          contactHref: u,
+          contactLinkBehavior: p
+        }
+      ),
+      e && /* @__PURE__ */ o(b, { pricingLabel: _, price: e })
+    ] }),
+    /* @__PURE__ */ o(
+      v,
+      {
+        itemKey: c,
+        onAdd: x,
+        className: t.addToCart,
+        addButtonClassName: t.addToCartButton,
+        size: "md",
+        buttonDoneText: ""
+      }
+    )
+  ] }) : /* @__PURE__ */ r("div", { className: w(t.productTile, C), ...B, children: [
+    /* @__PURE__ */ o(N, { src: f, alt: `${a} product image` }),
+    /* @__PURE__ */ r("div", { className: t.productData, children: [
+      /* @__PURE__ */ r("div", { className: t.topRow, children: [
+        /* @__PURE__ */ r("div", { className: t.productInformation, children: [
+          /* @__PURE__ */ o(g, { href: h, children: l }),
+          /* @__PURE__ */ r(n, { size: "sm", className: t.partNumber, children: [
+            "Part # ",
+            a
+          ] })
+        ] }),
+        T && /* @__PURE__ */ o("button", { onClick: () => T(c), children: /* @__PURE__ */ o(P, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+      ] }),
+      /* @__PURE__ */ r("div", { className: t.purchase, children: [
+        /* @__PURE__ */ r("div", { className: t.purchaseInformation, children: [
+          d && /* @__PURE__ */ o(
+            I,
+            {
+              availId: d,
+              availDescription: m,
+              contactHref: u,
+              contactLinkBehavior: p
+            }
+          ),
+          e && /* @__PURE__ */ o(b, { pricingLabel: _, price: e })
+        ] }),
+        /* @__PURE__ */ o(v, { itemKey: c, onAdd: x, className: t.addToCart, addButtonClassName: t.addToCartButton })
+      ] }),
+      i && i.length > 0 && /* @__PURE__ */ o("ul", { className: t.attributeContainer, children: i.map((s) => /* @__PURE__ */ r("li", { children: [
+        /* @__PURE__ */ r(n, { size: "xs", weight: "light", children: [
+          s.label,
+          ":"
+        ] }),
+        /* @__PURE__ */ o(n, { size: "xs", weight: "semibold", children: s.value })
+      ] }, s.value)) })
+    ] })
+  ] });
+}
+export {
+  X as Product
+};

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

@@ -0,0 +1,79 @@
+import { StoryObj } from '@storybook/react';
+import { Product, ProductProps, ProductView } from './Product';
+/**
+ * Product organism story.
+ * Combines Image, Link, Availability, Pricing, and AddToCart.
+ */
+declare const meta: {
+    title: string;
+    component: typeof Product;
+    parameters: {
+        layout: string;
+    };
+    argTypes: {
+        productView: {
+            control: {
+                type: "inline-radio";
+            };
+            options: ProductView[];
+            description: string;
+        };
+        availId: {
+            control: {
+                type: "select";
+            };
+            options: string[];
+            description: string;
+        };
+        availDescription: {
+            control: "text";
+            description: string;
+        };
+        contactHref: {
+            control: "text";
+            description: string;
+        };
+        contactLinkBehavior: {
+            control: {
+                type: "inline-radio";
+            };
+            options: string[];
+            description: string;
+        };
+        productDescription: {
+            control: "text";
+        };
+        productHref: {
+            control: "text";
+        };
+        partNumber: {
+            control: "text";
+        };
+        priceLabel: {
+            control: "text";
+        };
+        price: {
+            control: "text";
+        };
+        imgSrc: {
+            control: "text";
+        };
+        itemKey: {
+            control: "number";
+        };
+        onAddToCart: {
+            action: string;
+            description: string;
+        };
+    };
+    args: ProductProps;
+    tags: string[];
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const LimitedStock: Story;
+export declare const Unavailable: Story;
+export declare const ContactForAvailability: Story;
+export declare const TileView: Story;
+export declare const DifferentPriceLabel: Story;

package/dist/organisms/Product/Product.stories.js

@@ -0,0 +1,110 @@
+import { Product as a } from "./Product.js";
+const o = [
+  { label: "Color", value: "Gray" },
+  { label: "Brand", value: "Kason" },
+  { label: "Finish", value: "Chrome" },
+  { label: "Application", value: "Freezer/Cooler" },
+  { label: "Type", value: "Hydraulic" },
+  { label: "Offset", value: "Flush" },
+  { label: "Style", value: "Walk-in" },
+  { label: "Vendor Part #", value: "10921000-01" },
+  { label: "Attribute", value: "Placeholder" },
+  { label: "Attribute", value: "Placeholder" },
+  { label: "Attribute", value: "Placeholder" }
+], r = {
+  title: "Case Parts/Organisms/Product",
+  component: a,
+  parameters: { layout: "centered" },
+  argTypes: {
+    productView: {
+      control: { type: "inline-radio" },
+      options: ["Card", "Tile"],
+      description: "Visual presentation variant"
+    },
+    availId: {
+      control: { type: "select" },
+      options: ["available", "limited", "unavailable", "contact"],
+      description: "Availability variant"
+    },
+    availDescription: {
+      control: "text",
+      description: "Availability text"
+    },
+    contactHref: {
+      control: "text",
+      description: "Contact link (only for contact variant)"
+    },
+    contactLinkBehavior: {
+      control: { type: "inline-radio" },
+      options: ["same-tab", "new-tab"],
+      description: "Contact link target behavior"
+    },
+    productDescription: { control: "text" },
+    productHref: { control: "text" },
+    partNumber: { control: "text" },
+    priceLabel: { control: "text" },
+    price: { control: "text" },
+    imgSrc: { control: "text" },
+    itemKey: { control: "number" },
+    onAddToCart: { action: "addToCart", description: "(itemKey, quantity)" }
+  },
+  args: {
+    productView: "Card",
+    itemKey: 101,
+    partNumber: "PN-44567",
+    productDescription: "Example Replacement Part Long Description",
+    productHref: "https://mobiledev.caseparts.com/part/1092-01/Kason-1092-Hydraulic-Door-Closer",
+    availId: "available",
+    availDescription: "In stock",
+    contactHref: "https://dev.caseparts.com/account/contactus",
+    contactLinkBehavior: "new-tab",
+    priceLabel: "List Price",
+    price: "$129.99",
+    imgSrc: "https://www.caseparts.com/Ortery/360/Optimized/1092-01_/1092-01_04.webp",
+    attributes: o,
+    onAddToCart: (t, e) => {
+      alert(`Add to cart (story) ${JSON.stringify({ itemKey: t, quantity: e })}`);
+    },
+    onClose: (t) => {
+      alert(`On close clicked ${t}`);
+    }
+  },
+  tags: ["autodocs"]
+}, l = {}, c = {
+  args: {
+    availId: "limited",
+    availDescription: "Limited stock"
+  }
+}, n = {
+  args: {
+    availId: "unavailable",
+    availDescription: "Out of stock",
+    priceLabel: "Last Known"
+  }
+}, s = {
+  args: {
+    availId: "contact",
+    availDescription: "Contact for availability",
+    contactLinkBehavior: "new-tab",
+    contactHref: "https://dev.caseparts.com/account/contactus"
+  }
+}, p = {
+  args: {
+    productView: "Tile",
+    productDescription: "Tile View Product"
+  }
+}, d = {
+  args: {
+    priceLabel: "Member",
+    price: "$118.49"
+  }
+};
+export {
+  s as ContactForAvailability,
+  l as Default,
+  d as DifferentPriceLabel,
+  c as LimitedStock,
+  p as TileView,
+  n as Unavailable,
+  r as default
+};

package/package.json

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