@shopbb/helium 0.2.0 → 0.3.0-alpha.1

package/src/components/VariantSelector.tsx

@@ -0,0 +1,148 @@
+/**
+ * <VariantSelector> — 商品 variant 选择器
+ *
+ * 对齐 @shopify/hydrogen <VariantSelector>:
+ *   - 自动解析 variants 的 selectedOptions 维度（颜色 / 尺寸 等）
+ *   - 渲染每个维度的选项按钮
+ *   - 不可购买组合 disabled
+ *   - URL 同步（可选）
+ *   - 默认选第一个 availableForSale
+ *
+ * 设计：组件用 render prop，把每个 option 的选项交给商家渲染。
+ *
+ * 用法：
+ *   <VariantSelector
+ *     product={product}
+ *     value={selectedVariantId}
+ *     onChange={setSelectedVariantId}
+ *   >
+ *     {({ option, value, onSelect }) => (
+ *       <div>
+ *         <h4>{option.name}</h4>
+ *         {option.values.map((v) => (
+ *           <button
+ *             key={v.value}
+ *             disabled={!v.available}
+ *             onClick={() => onSelect(v.value)}
+ *             aria-pressed={v.value === value}
+ *           >
+ *             {v.value}
+ *           </button>
+ *         ))}
+ *       </div>
+ *     )}
+ *   </VariantSelector>
+ */
+
+import * as React from 'react';
+
+interface SelectedOption {
+  name: string;
+  value: string;
+}
+
+interface ProductVariant {
+  id: string;
+  availableForSale: boolean;
+  selectedOptions?: SelectedOption[];
+}
+
+interface ProductLike {
+  options?: Array<{ name: string; values: string[] }>;
+  variants: { nodes: ProductVariant[] };
+}
+
+export interface VariantOption {
+  name: string;
+  values: Array<{ value: string; available: boolean }>;
+}
+
+export interface VariantSelectorRenderProps {
+  option: VariantOption;
+  /** 当前已选择的 value（在这个 option 维度上） */
+  value: string | undefined;
+  /** 选择 value，触发 onChange 更新 selectedVariantId */
+  onSelect: (value: string) => void;
+}
+
+export interface VariantSelectorProps {
+  product: ProductLike;
+  /** 当前选中 variant 的 GID */
+  value: string;
+  /** variant 切换时调用 */
+  onChange?: (variantId: string) => void;
+  /** 每个 option 的渲染函数 */
+  children: (renderProps: VariantSelectorRenderProps) => React.ReactNode;
+}
+
+export function VariantSelector(props: VariantSelectorProps) {
+  const { product, value, onChange, children } = props;
+
+  const variants = product.variants.nodes;
+  const currentVariant = variants.find((v) => v.id === value) || variants[0];
+
+  // 推断 options（如果 product.options 没传，从 variants.selectedOptions 提取）
+  const options: VariantOption[] = React.useMemo(() => {
+    if (product.options && product.options.length > 0) {
+      return product.options.map((opt) => ({
+        name: opt.name,
+        values: opt.values.map((v) => ({
+          value: v,
+          available: variants.some(
+            (variant) =>
+              variant.availableForSale &&
+              variant.selectedOptions?.some((so) => so.name === opt.name && so.value === v),
+          ),
+        })),
+      }));
+    }
+    // 从 variants.selectedOptions 反推
+    const dimMap = new Map<string, Set<string>>();
+    for (const v of variants) {
+      for (const so of v.selectedOptions ?? []) {
+        if (!dimMap.has(so.name)) dimMap.set(so.name, new Set());
+        dimMap.get(so.name)!.add(so.value);
+      }
+    }
+    return Array.from(dimMap.entries()).map(([name, values]) => ({
+      name,
+      values: Array.from(values).map((v) => ({
+        value: v,
+        available: variants.some(
+          (variant) =>
+            variant.availableForSale &&
+            variant.selectedOptions?.some((so) => so.name === name && so.value === v),
+        ),
+      })),
+    }));
+  }, [product, variants]);
+
+  // 切换某 option 的 value：找一个匹配的 variant
+  const handleSelect = (optionName: string, optionValue: string) => {
+    const currentSelected = new Map<string, string>(
+      (currentVariant?.selectedOptions ?? []).map((so) => [so.name, so.value]),
+    );
+    currentSelected.set(optionName, optionValue);
+    // 找最匹配 + available 的 variant
+    const target = variants.find((v) =>
+      Array.from(currentSelected.entries()).every(([n, val]) =>
+        v.selectedOptions?.some((so) => so.name === n && so.value === val),
+      ),
+    );
+    if (target) onChange?.(target.id);
+  };
+
+  return (
+    <>
+      {options.map((option) => (
+        <React.Fragment key={option.name}>
+          {children({
+            option,
+            value: currentVariant?.selectedOptions?.find((so) => so.name === option.name)?.value,
+            onSelect: (val) => handleSelect(option.name, val),
+          })}
+        </React.Fragment>
+      ))}
+    </>
+  );
+}

package/src/components/index.ts

@@ -0,0 +1,33 @@
+/**
+ * @shopbb/helium/components — 商家用 React 组件
+ *
+ * 用法：
+ *   import { Money, Image, ProductPrice, AddToCartButton } from '@shopbb/helium/components';
+ *
+ * 设计原则：
+ *   - 无样式：组件只管行为 + 语义化 DOM，样式商家自己写
+ *   - data-* 钩子：方便选择器
+ *   - 对齐 Shopify Hydrogen 同名组件的 API，迁移成本低
+ */
+
+export { Money } from './Money';
+export type { MoneyProps, MoneyData, MoneyMeasurement } from './Money';
+
+export { Image } from './Image';
+export type { ImageProps, ImageData } from './Image';
+
+export { ProductPrice } from './ProductPrice';
+export type { ProductPriceProps } from './ProductPrice';
+
+export { AddToCartButton } from './AddToCartButton';
+export type { AddToCartButtonProps } from './AddToCartButton';
+
+export { CartLineQuantityAdjustButton } from './CartLineQuantityAdjustButton';
+export type { CartLineQuantityAdjustButtonProps } from './CartLineQuantityAdjustButton';
+
+export { VariantSelector } from './VariantSelector';
+export type {
+  VariantSelectorProps,
+  VariantSelectorRenderProps,
+  VariantOption,
+} from './VariantSelector';