@base44/app-plugin-commerce 0.2.1 → 0.2.2

package/src/commerce/storefront/blocks/VariantSelectorBlock.jsx

@@ -1,81 +0,0 @@
-import React from "react";
-import { OPTION_OUT_OF_STOCK, OPTION_UNAVAILABLE } from "@/commerce/utils";
-
-/**
- * One control per attribute axis — Size, Color — with availability shown rather
- * than hidden.
- *
- *   const { view, pick } = useProduct(slug);
- *   <VariantSelectorBlock view={view} onPick={pick} />
- *
- * The rule it encodes: **a selector per axis, never a list of variations**, and
- * an option that isn't buyable is rendered *disabled*, not removed — a customer
- * who can't see that a size exists assumes the store doesn't carry it. Pass
- * `renderOption` for swatches or any other option UI.
- *
- * @param {{view: object, onPick: (axisKey: string, option: string) => void,
- *   className?: string,
- *   renderOption?: (o: {axis: object, option: string, selected: boolean,
- *     state: string, disabled: boolean, pick: () => void}) => React.ReactNode}} props
- */
-export function VariantSelectorBlock({ view, onPick, className = "", renderOption }) {
-  if (!view?.isVariable || !view.axes?.length) return null;
-
-  return (
-    <div data-commerce="variant-selector" className={`space-y-4 ${className}`}>
-      {view.axes.map((axis) => (
-        <fieldset key={axis.key} data-commerce="variant-axis" data-commerce-axis={axis.name}>
-          <legend className="mb-2 text-xs uppercase tracking-wide text-muted-foreground">
-            {axis.name}
-            {view.selection?.[axis.key] ? `: ${view.selection[axis.key]}` : ""}
-          </legend>
-          <div className="flex flex-wrap gap-2">
-            {axis.options.map((option) => {
-              const state = view.availability?.[axis.key]?.[option] ?? "available";
-              const selected = view.selection?.[axis.key] === option;
-              const disabled = state === OPTION_UNAVAILABLE;
-              const pick = () => onPick?.(axis.key, option);
-
-              if (renderOption) {
-                return (
-                  <React.Fragment key={option}>
-                    {renderOption({ axis, option, selected, state, disabled, pick })}
-                  </React.Fragment>
-                );
-              }
-              return (
-                <button
-                  key={option}
-                  type="button"
-                  data-commerce="variant-option"
-                  data-commerce-state={state}
-                  aria-pressed={selected}
-                  disabled={disabled}
-                  onClick={pick}
-                  title={
-                    state === OPTION_OUT_OF_STOCK
-                      ? "Out of stock"
-                      : disabled
-                        ? "Not available with your other choices"
-                        : undefined
-                  }
-                  className={`border px-3 py-1.5 text-sm ${
-                    selected ? "border-foreground" : "border-border"
-                  } ${state === OPTION_OUT_OF_STOCK ? "line-through opacity-60" : ""} disabled:opacity-40`}
-                >
-                  {option}
-                </button>
-              );
-            })}
-          </div>
-        </fieldset>
-      ))}
-
-      {view.missingAxes?.length > 0 && (
-        <p data-commerce="variant-hint" className="text-xs text-muted-foreground">
-          Choose {view.missingAxes.map((a) => a.name.toLowerCase()).join(" and ")} to continue.
-        </p>
-      )}
-    </div>
-  );
-}

package/src/commerce/storefront/blocks/index.js

@@ -1,44 +0,0 @@
-/**
- * Storefront blocks — working default markup for the parts of a shopfront that
- * are the same in every store.
- *
- * The split is deliberate:
- *
- * - **Identity surfaces are yours**: home, collection/grid, the product page's
- *   layout, the product card, the theme. That is where "make it look like X"
- *   lives, and no markup ships for it.
- * - **Commodity surfaces ship as blocks**: checkout, cart lines, totals, the
- *   coupon field, reviews, order-received, and the product page's internals
- *   (variant selector, gallery, specs, breadcrumbs, strips). Every store's
- *   version of these is functionally identical, and hand-writing them is where
- *   storefront bugs cluster.
- *
- * Blocks are thin compositions of the hooks in this package, styled by
- * inheritance: semantic markup, theme tokens (`border-border`, `text-muted-
- * foreground`, `bg-primary`), and a stable `data-commerce="…"` attribute on
- * every meaningful element — so your CSS can restyle any part of them, and
- * tests can target them. Each takes `className` and, where there is more than
- * one region, `slots`. When a design needs different *structure*, drop to the
- * hooks the block uses and rewrite that one region.
- *
- * A whole checkout page:
- *
- *   import { CheckoutBlock } from "@/commerce/storefront";
- *   export default function Checkout() {
- *     return <main className="mx-auto max-w-3xl px-6 py-16"><CheckoutBlock /></main>;
- *   }
- */
-export { CartLinesBlock } from "./CartLinesBlock";
-export { CheckoutBlock } from "./CheckoutBlock";
-export { AddressFieldsBlock } from "./AddressFieldsBlock";
-export { CouponFieldBlock } from "./CouponFieldBlock";
-export { TotalsBlock } from "./TotalsBlock";
-export { QuantityStepper } from "./QuantityStepper";
-export { OrderReceivedBlock } from "./OrderReceivedBlock";
-export { ReviewsBlock } from "./ReviewsBlock";
-export { VariantSelectorBlock } from "./VariantSelectorBlock";
-export { AddToCartBlock } from "./AddToCartBlock";
-export { ProductGalleryBlock } from "./ProductGalleryBlock";
-export { ProductSpecsBlock } from "./ProductSpecsBlock";
-export { BreadcrumbsBlock } from "./BreadcrumbsBlock";
-export { ProductStripBlock } from "./ProductStripBlock";