@internom/collection-ui

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, 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

yarn add @internom/collection-ui

Import the package stylesheet once. It includes the Swiper base/navigation CSS used by CollectionCarousel.

import "@internom/collection-ui/styles.css";

Simple Usage

import { CollectionView } from "@internom/collection-ui";
import "@internom/collection-ui/styles.css";

export function CollectionPreview({
  collection,
  renderStyle,
}: {
  collection: unknown;
  renderStyle?: unknown;
}) {
  return (
    <CollectionView
      collection={collection as any}
      renderStyle={renderStyle as any}
      className="collection-ui--dark collection-ui--preview"
    />
  );
}

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.

CollectionView accepts Collection V2 fields modeled after shared/model/core/collection/collection.model.ts:

normalizeCollection({
  id: "collection-id",
  title: "Онцгой бүтээгдэхүүн",
  image: "https://example.com/banner.jpg",
  link: "/collection/special",
  layout: {
    variant: "SPECIAL",
    direction: "HORIZONTAL",
    columns: 6,
  },
  items: [
    {
      id: "item-id",
      productId: "product-id",
      title: "A Little Life",
      author: "Hanya Yanagihara",
      imageUrl: "a-little-life.jpg",
      price: 36900,
      discountPrice: 42900,
      type: "BOOK",
    },
  ],
});

Exports

import {
  BookSpine,
  CollectionCarousel,
  CollectionRenderer,
  CollectionView,
  getCollectionLayoutControls,
  getCollectionLayoutDefinition,
  createCollectionRendererAdapters,
  isCollectionLayoutControlVisible,
  normalizeCollection,
  normalizeCollectionLayout,
} from "@internom/collection-ui";

Admin Layout Controls

Admin forms should not show every control for every template. Ask the package which controls are valid:

import {
  getCollectionLayoutDefinition,
  isCollectionLayoutControlVisible,
} from "@internom/collection-ui";

const definition = getCollectionLayoutDefinition(layout.name);

const showDirection = isCollectionLayoutControlVisible(layout.name, "direction");
const showShape = isCollectionLayoutControlVisible(layout.name, "shape");
const showColumns = isCollectionLayoutControlVisible(layout.name, "columns");

// Render controls from definition.directionOptions / shapeOptions / columnOptions.

Examples:

• special, banner, hero: hide direction, shape, and columns.
• carousel, grid, featured, image-grid: show columns.
• image-grid: show shape.
• list, dynamic: show direction and numbered toggle.

Optional App Integration

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.
• renderCarousel for custom Swiper controls.
• renderBookMedia for custom spine/media.
• renderPrice for app price formatting.
• renderHtml for app rich-text clamping.
• renderItem for app product cards.

Admin Checklist

If admin preview still looks different from internom.mn:

• Use real REST item data, not placeholder cards.
• 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.
• 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

yarn build

The build emits ESM JavaScript, source maps, CSS, and TypeScript declarations into dist.