@chinggis.systems/collection-ui 1.0.0 → 1.0.1

package/README.md

@@ -2,12 +2,12 @@
 
 Reusable React renderer for Internom collection layouts.
 
-The package owns normalized collection rendering, commerce-oriented item cards, book-spine media, price/rich-text fallbacks, Swiper carousel rendering, and Collection V2 normalization. Apps still configure route prefixes, image base URLs, item type checks, tracking, and framework-specific adapters when needed.
+The package owns normalized collection rendering, commerce-oriented item cards, book-spine media, price/rich-text fallbacks, Swiper carousel rendering, Collection V2 normalization, and Internom storefront defaults. Apps can pass raw collection data through props and only override adapters when they need framework-specific behavior.
 
 ## Install
 
 ```sh
-yarn add @internom/collection-ui swiper
+yarn add @internom/collection-ui
 ```
 
 Import the package stylesheet once. It includes the Swiper base/navigation CSS used by `CollectionCarousel`.
@@ -16,46 +16,32 @@ Import the package stylesheet once. It includes the Swiper base/navigation CSS u
 import "@internom/collection-ui/styles.css";
 ```
 
-## Collection V2 Usage
+## Simple Usage
 
 ```tsx
-import {
-  CollectionRenderer,
-  createCollectionRendererAdapters,
-  normalizeCollection,
-} from "@internom/collection-ui";
+import { CollectionView } from "@internom/collection-ui";
 import "@internom/collection-ui/styles.css";
 
-const adapters = createCollectionRendererAdapters({
-  collectionBasePath: "/collection",
-  itemBasePath: "/entity/id",
-  thumbBaseUrl: "https://image.internom.mn/public/product-thumb/",
-  isAudioType: (type) => type === "AUDIO" || type === "audio",
-  isProductType: (type) => ["TOY", "GIFT", "STATIONARY"].includes(String(type)),
-  readMoreLabel: "Дэлгэрэнгүй үзэх",
-});
-
-export function CollectionPreview({ collection }: { collection: unknown }) {
+export function CollectionPreview({
+  collection,
+  renderStyle,
+}: {
+  collection: unknown;
+  renderStyle?: unknown;
+}) {
   return (
-    <CollectionRenderer
-      collection={normalizeCollection(collection as any)}
-      adapters={adapters}
+    <CollectionView
+      collection={collection as any}
+      renderStyle={renderStyle as any}
       className="collection-ui--dark collection-ui--preview"
-      labels={{
-        all: "Бүгд",
-        viewAll: "Бүгдийг үзэх",
-        readMore: "Дэлгэрэнгүй үзэх",
-        previous: "Өмнөх",
-        next: "Дараах",
-      }}
     />
   );
 }
 ```
 
-Use `collection-ui--preview` inside admin panes. It keeps media/images smaller and caps the preview height so the form controls stay usable. Drop that class for storefront/full-page rendering.
+Use `collection-ui--preview` inside admin panes. It keeps media/images smaller, caps the preview height so the form controls stay usable, and prevents preview links from navigating away from the form. Drop that class for storefront/full-page rendering.
 
-`normalizeCollection` accepts Collection V2-style REST fields:
+`CollectionView` accepts Collection V2 fields modeled after `shared/model/core/collection/collection.model.ts`:
 
 ```ts
 normalizeCollection({
@@ -90,6 +76,7 @@ import {
   BookSpine,
   CollectionCarousel,
   CollectionRenderer,
+  CollectionView,
   getCollectionLayoutControls,
   getCollectionLayoutDefinition,
   createCollectionRendererAdapters,
@@ -125,9 +112,9 @@ Examples:
 - `image-grid`: show shape.
 - `list`, `dynamic`: show direction and numbered toggle.
 
-## Exact App Integration
+## Optional App Integration
 
-The built-in package skin is framework-free and production-oriented. If an app needs exact internom.mn parity with app-specific components, provide adapters:
+The built-in package skin is framework-free and production-oriented. If an app needs app-specific components, provide adapters:
 
 - `renderLink` for router links.
 - `renderImage` for optimized images.
@@ -137,17 +124,15 @@ The built-in package skin is framework-free and production-oriented. If an app n
 - `renderHtml` for app rich-text clamping.
 - `renderItem` for app product cards.
 
-This repository includes an example at `src/ui/collection/ecommerceCollectionRendererAdapters.tsx`.
-
 ## Admin Checklist
 
 If admin preview still looks different from internom.mn:
 
 - Use real REST item data, not placeholder cards.
-- Use `normalizeCollection` on the Collection V2 REST payload.
+- Use `CollectionView` for the default independent package renderer, or `normalizeCollection` with `CollectionRenderer` for low-level control.
 - Import `@internom/collection-ui/styles.css`.
 - Use `className="collection-ui--dark collection-ui--preview"` in admin panes.
-- Configure `thumbBaseUrl`, `collectionBasePath`, `itemBasePath`, `isAudioType`, and `isProductType`.
+- Override `adapterOptions` only when a host app has different routes, image hosts, or item type names.
 - Ensure the admin preview shell is not adding a conflicting fixed card/background around the collection if you expect full-width storefront parity.
 
 ## Build

package/dist/CollectionRenderer.d.ts

@@ -1,3 +1,3 @@
-import type { CollectionRendererProps } from "./types";
-export declare function CollectionRenderer({ collection, layout, adapters, labels, className, }: CollectionRendererProps): import("react/jsx-runtime").JSX.Element | null;
+import type { CollectionRendererProps } from "./types";
+export declare function CollectionRenderer({ collection, layout, adapters, labels, className, }: CollectionRendererProps): import("react/jsx-runtime").JSX.Element | null;
 //# sourceMappingURL=CollectionRenderer.d.ts.map

package/dist/CollectionRenderer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CollectionRenderer.d.ts","sourceRoot":"","sources":["../src/CollectionRenderer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAMV,uBAAuB,EAGxB,MAAM,SAAS,CAAC;AAiBjB,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,uBAAuB,kDA0BzB"}
+{"version":3,"file":"CollectionRenderer.d.ts","sourceRoot":"","sources":["../src/CollectionRenderer.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAMV,uBAAuB,EAGxB,MAAM,SAAS,CAAC;AAiBjB,wBAAgB,kBAAkB,CAAC,EACjC,UAAU,EACV,MAAM,EACN,QAAQ,EACR,MAAM,EACN,SAAS,GACV,EAAE,uBAAuB,kDA4BzB"}