@asteby/storefront-react 0.5.0 → 0.7.0

package/README.md

@@ -149,6 +149,33 @@ defaults, coerces numeric strings, drops unknown props and skips a section
 missing a required prop. `registry.toJSONSchema()` / `sectionJsonSchema(def)`
 emit the JSON Schema the OPS editor reads (`section.schema.json`).
 
+### Sincronizar tipos de sección con OPS
+
+Convierte los `defineSection` al formato del addon `storefront_content` y los
+publica sin escribir conversores a mano:
+
+```ts
+import { createStorefrontClient } from '@asteby/storefront'
+import { syncSectionTypes } from '@asteby/storefront-react'
+
+const sf = createStorefrontClient({ baseUrl: process.env.OPS_GW!, token: process.env.OPS_SK! }) // sk_ con content:write
+const { created, updated, warnings } = await syncSectionTypes(sf, registry)
+// o sin cliente: syncSectionTypes({ baseUrl, token, fetch? }, registry)
+// o solo exportar: registry.toOpsSectionTypes() -> { types, warnings }
+```
+
+Conversión: `items`→`fields` (recursivo), `url`/`color`→`text` (la URL viaja como
+texto; `link` de OPS es `{label,url}`), `products`→`product_list`. `max` fija el
+tope de texto en OPS. `defineSection` acepta `category` y `maxPerPage`.
+
+Los tipos integrados de OPS (`hero, product_grid, collection_list, rich_text,
+faq, image_with_text`) se excluyen (`excludeBuiltin`, por omisión `true`) y
+generan `warnings`; pasa `builtinProps: { hero: ['title', ...] }` para avisar
+solo de las props locales que no existen en OPS. Antes de llamar a OPS se valida
+localmente (lista sin `fields`, `select` sin `options`, kind desconocido, clave no
+snake_case, etiqueta vacía): lanza `SectionTypesValidationError` con `issues[]`
+(`{path,message}`); también disponible como `validateOpsSectionTypes(types)`.
+
 ### Theme
 
 `themeToCss(theme, { selector?, naming?, fontFallback? })` turns
@@ -492,3 +519,17 @@ import { CartProgressBars, CrossSellModal, OrderNote, PromoPopup } from '@asteby
 | `ProductImage`, `ProductMockup`, `MockupProvider`, `createMockupRegistry`, `registerMockup`, `BUILTIN_MOCKUPS`, `MockupFrame`, `MockupText`, `TireMockup`, `PartMockup`, `SupplementMockup`, `GenericMockup` | Mockups de respaldo (subpath `/mockups`) |
 | `PaymentBrick`, `useEmbeddedPayment`, `VoucherCard`, `PaymentChallenge`, `createFetchTransport`, `mercadoPagoBricksAdapter`, `loadPaymentSdk`, `paymentCsp`, `readPaymentTheme` | Pago integrado (subpath `/payments`) |
 | `PromoPopup`, `CartProgressBars`, `PromoProgressBar`, `CrossSellModal`, `OrderNote`, `isExcludedPath`, `frequencyAllows`, `isCrawler` | Promociones y venta cruzada (subpath `/promotions`) |
+
+## `@asteby/storefront-react/ui`
+
+Piezas de interfaz de tienda, sin dependencia de router. Importa los estilos una vez (`import '@asteby/storefront-react/ui.css'`)
+y define los tokens `--background --foreground --border --tint --primary --primary-foreground --ring`.
+
+| Pieza | Para qué |
+|---|---|
+| `Select` | Selector con teclado completo y tema claro/oscuro; sin JavaScript es un `<select>` nativo. |
+| `Swatch` | Muestra 2D plana de una variante: color, combinación (partes iguales) o emoji. Aro del color primario solo si el color se pierde con el fondo. |
+| `parseSwatchAttribute` / `resolveSwatchSpec` | El catálogo manda: atributo `"Nombre:#hex\|Nombre:#hex+#hex\|Nombre:🍓"`; si no hay dato, se resuelve por nombre (colores y sabores en español e inglés). |
+| `ThemeToggle`, `THEME_INIT_SCRIPT` | Claro/oscuro con `html[data-theme]` y localStorage, sin parpadeo. |
+| `InstallApp`, `useServiceWorker` | Instalación PWA (Android/Chrome y pista para iOS) y registro del service worker. |
+| `.select`, `.check`, `.radio` | Controles de formulario con los tokens de la tienda. |

package/dist/index.cjs

@@ -1010,6 +1010,156 @@ function JsonLd({ data, nonce }) {
   if (!data || Array.isArray(data) && data.length === 0) return null;
   return /* @__PURE__ */ jsxRuntime.jsx("script", { type: "application/ld+json", nonce, dangerouslySetInnerHTML: { __html: serializeJsonLd(data) } });
 }
+var OPS_BUILTIN_SECTION_TYPES = ["hero", "product_grid", "collection_list", "rich_text", "faq", "image_with_text"];
+var OPS_PROP_KINDS = ["text", "textarea", "richtext", "image", "link", "number", "select", "boolean", "collection", "collection_list", "product", "product_list", "list"];
+var SectionTypesValidationError = class extends Error {
+  issues;
+  constructor(issues) {
+    super(`Invalid section types for OPS:
+${issues.map((i) => `  - ${i.path}: ${i.message}`).join("\n")}`);
+    this.name = "SectionTypesValidationError";
+    this.issues = issues;
+  }
+};
+var SNAKE = /^[a-z][a-z0-9]*(_[a-z0-9]+)*$/;
+var KIND_MAP = {
+  text: "text",
+  textarea: "textarea",
+  richtext: "richtext",
+  url: "text",
+  color: "text",
+  image: "image",
+  number: "number",
+  boolean: "boolean",
+  select: "select",
+  collection: "collection",
+  product: "product",
+  products: "product_list",
+  list: "list"
+};
+var LIST_KINDS = /* @__PURE__ */ new Set(["list"]);
+function convertProps(schema, path, issues) {
+  const out = [];
+  for (const [key, spec] of Object.entries(schema ?? {})) {
+    const p = `${path}.${key}`;
+    const kind = KIND_MAP[spec.kind];
+    if (!kind) {
+      issues.push({ path: `${p}.kind`, message: `unknown kind "${String(spec.kind)}"` });
+      continue;
+    }
+    const prop = { key, kind, label: spec.label };
+    if (spec.required) prop.required = true;
+    if ("default" in spec && spec.default !== void 0) prop.default = spec.default;
+    if (spec.options) prop.options = spec.options.map((o) => ({ value: o.value, label: o.label }));
+    if (spec.min !== void 0) prop.min = spec.min;
+    if (spec.max !== void 0) prop.max = spec.max;
+    if (LIST_KINDS.has(kind)) prop.fields = convertProps(spec.items, `${p}.fields`, issues);
+    out.push(prop);
+  }
+  return out;
+}
+function validateOpsSectionTypes(types) {
+  const issues = [];
+  const seen = /* @__PURE__ */ new Set();
+  const walk = (props, path) => {
+    if (!Array.isArray(props)) {
+      issues.push({ path, message: "must be a list" });
+      return;
+    }
+    const keys = /* @__PURE__ */ new Set();
+    props.forEach((prop, i) => {
+      const p = `${path}[${i}]`;
+      if (typeof prop.key !== "string" || !SNAKE.test(prop.key)) issues.push({ path: `${p}.key`, message: `"${String(prop.key)}" must be snake_case (a-z, 0-9, _)` });
+      else if (keys.has(prop.key)) issues.push({ path: `${p}.key`, message: `duplicate key "${prop.key}"` });
+      else keys.add(prop.key);
+      if (typeof prop.label !== "string" || !prop.label.trim()) issues.push({ path: `${p}.label`, message: "label is required" });
+      if (!OPS_PROP_KINDS.includes(prop.kind)) {
+        issues.push({ path: `${p}.kind`, message: `unknown kind "${String(prop.kind)}"` });
+        return;
+      }
+      if (prop.kind === "list") {
+        if (!prop.fields || prop.fields.length === 0) issues.push({ path: `${p}.fields`, message: 'list requires a non-empty "fields"' });
+        else walk(prop.fields, `${p}.fields`);
+      }
+      if (prop.kind === "select" && (!prop.options || prop.options.length === 0)) issues.push({ path: `${p}.options`, message: 'select requires non-empty "options"' });
+      if (prop.min !== void 0 && prop.max !== void 0 && prop.min > prop.max) issues.push({ path: `${p}.max`, message: "max must be >= min" });
+    });
+  };
+  types.forEach((t, i) => {
+    const p = t.type ? t.type : `[${i}]`;
+    if (!t.type || !t.type.trim()) issues.push({ path: `${p}.type`, message: "type is required" });
+    else if (seen.has(t.type)) issues.push({ path: `${p}.type`, message: `duplicate type "${t.type}"` });
+    else seen.add(t.type);
+    if (!t.label || !t.label.trim()) issues.push({ path: `${p}.label`, message: "label is required" });
+    if (t.max_per_page !== void 0 && (!Number.isInteger(t.max_per_page) || t.max_per_page < 1)) issues.push({ path: `${p}.max_per_page`, message: "must be a positive integer" });
+    walk(t.schema?.props, `${p}.schema.props`);
+  });
+  return issues;
+}
+function sectionTypesToOps(source, options = {}) {
+  const excludeBuiltin = options.excludeBuiltin ?? true;
+  const defs = Array.isArray(source) ? source : source.definitions();
+  const builtin = new Set(OPS_BUILTIN_SECTION_TYPES);
+  const issues = [];
+  const warnings = [];
+  const types = [];
+  for (const def of defs) {
+    if (excludeBuiltin && builtin.has(def.type)) {
+      const known = options.builtinProps?.[def.type];
+      if (known) {
+        for (const name of Object.keys(def.schema ?? {})) {
+          if (!known.includes(name)) warnings.push({ type: def.type, prop: name, message: `prop "${name}" of built-in type "${def.type}" does not exist in the OPS schema; built-in types cannot be redefined, so it will not be editable in OPS` });
+        }
+      } else {
+        warnings.push({ type: def.type, message: `"${def.type}" is a built-in OPS type: not synced, and its local props cannot be verified against the OPS schema` });
+      }
+      continue;
+    }
+    const entryIssues = [];
+    const props = convertProps(def.schema, `${def.type}.schema.props`, entryIssues);
+    issues.push(...entryIssues);
+    const out = { type: def.type, label: def.label ?? def.type, schema: { props } };
+    if (def.description) out.description = def.description;
+    if (def.category) out.category = def.category;
+    if (def.maxPerPage !== void 0) out.max_per_page = def.maxPerPage;
+    types.push(out);
+  }
+  issues.push(...validateOpsSectionTypes(types));
+  if (issues.length) throw new SectionTypesValidationError(issues);
+  return { types, warnings };
+}
+var SYNC_PATH = "/storefront/content/section-types";
+var count = (v) => Array.isArray(v) ? v.length : typeof v === "number" ? v : 0;
+async function syncSectionTypes(target, source, options = {}) {
+  const { types, warnings } = sectionTypesToOps(source, options);
+  let raw;
+  if ("request" in target && typeof target.request === "function") {
+    raw = await target.request({ method: "PUT", path: SYNC_PATH, body: { section_types: types } });
+  } else {
+    const t = target;
+    if (!t.token.startsWith("sk_")) throw new TypeError("syncSectionTypes: an sk_ token with content:write is required");
+    const f = t.fetch ?? globalThis.fetch.bind(globalThis);
+    const url = t.baseUrl.replace(/\/+$/, "") + SYNC_PATH;
+    const res = await f(url, {
+      method: "PUT",
+      headers: { Authorization: `Bearer ${t.token}`, "Content-Type": "application/json", Accept: "application/json" },
+      body: JSON.stringify({ section_types: types })
+    });
+    const text = await res.text();
+    let body;
+    try {
+      body = text ? JSON.parse(text) : void 0;
+    } catch {
+      body = void 0;
+    }
+    if (!res.ok) {
+      throw new storefront.StorefrontError({ status: res.status, code: body?.code ?? body?.error?.code ?? "unknown", message: body?.message ?? body?.error?.message ?? `Section types sync failed (${res.status})`, url });
+    }
+    raw = body;
+  }
+  const data = raw && typeof raw === "object" && "data" in raw ? raw.data : raw;
+  return { created: count(data?.created), updated: count(data?.updated), warnings };
+}
 function defineSection(definition) {
   return definition;
 }
@@ -1033,6 +1183,9 @@ function resolveSectionProps(schema, raw, path = "") {
       else if (spec.required) errors.push({ prop: key, message: "is required" });
       continue;
     }
+    if (spec.kind === "image" && typeof value === "object" && value !== null && typeof value.url === "string") {
+      value = value.url;
+    }
     if (STRING_KINDS.has(spec.kind)) {
       if (typeof value !== "string") {
         fail2("must be a string");
@@ -1156,6 +1309,14 @@ var SectionRegistry = class {
   toJSONSchema() {
     return Object.fromEntries(this.definitions().map((d) => [d.type, sectionJsonSchema(d)]));
   }
+  /**
+   * Section types in the OPS `storefront_content` format, ready for
+   * `PUT /storefront/content/section-types`. Throws `SectionTypesValidationError`
+   * on anything OPS would reject; `warnings` flags built-in types.
+   */
+  toOpsSectionTypes(options) {
+    return sectionTypesToOps(this, options);
+  }
 };
 function createSectionRegistry(definitions = []) {
   return new SectionRegistry(definitions);
@@ -1596,6 +1757,8 @@ exports.LocationList = LocationList;
 exports.LocationPicker = LocationPicker;
 exports.Money = Money;
 exports.NearestLocationForm = NearestLocationForm;
+exports.OPS_BUILTIN_SECTION_TYPES = OPS_BUILTIN_SECTION_TYPES;
+exports.OPS_PROP_KINDS = OPS_PROP_KINDS;
 exports.OpenStatus = OpenStatus;
 exports.PickupOption = PickupOption;
 exports.ProductPrice = ProductPrice;
@@ -1603,6 +1766,7 @@ exports.RestockNotifyForm = RestockNotifyForm;
 exports.SELECTED_LOCATION_PARAM = SELECTED_LOCATION_PARAM;
 exports.SELECTED_LOCATION_STORAGE_KEY = SELECTED_LOCATION_STORAGE_KEY;
 exports.SectionRegistry = SectionRegistry;
+exports.SectionTypesValidationError = SectionTypesValidationError;
 exports.Sections = Sections;
 exports.SrOnly = SrOnly;
 exports.StockConflictAlert = StockConflictAlert;
@@ -1629,9 +1793,11 @@ exports.readCartCookie = readCartCookie;
 exports.readSelectedLocationId = readSelectedLocationId;
 exports.resolveSectionProps = resolveSectionProps;
 exports.sectionJsonSchema = sectionJsonSchema;
+exports.sectionTypesToOps = sectionTypesToOps;
 exports.seoMeta = seoMeta;
 exports.serializeCartCookie = serializeCartCookie;
 exports.serializeJsonLd = serializeJsonLd;
+exports.syncSectionTypes = syncSectionTypes;
 exports.themeFontsHref = themeFontsHref;
 exports.themeToCss = themeToCss;
 exports.themeToCssVariables = themeToCssVariables;
@@ -1647,6 +1813,7 @@ exports.useProductOptions = useProductOptions;
 exports.useSelectedLocation = useSelectedLocation;
 exports.useStorefront = useStorefront;
 exports.useStorefrontClient = useStorefrontClient;
+exports.validateOpsSectionTypes = validateOpsSectionTypes;
 exports.writeCartCookie = writeCartCookie;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map