@commercetools/merchant-center-shared-ui

This package contains shared UI components and constants intended for use across various Merchant Center applications. It is publicly published as @commercetools/merchant-center-shared-ui.

Package Structure

src/
├── components/          # React UI components
├── constants/           # Shared application constants
│   ├── feature-toggles.ts   # Feature flag keys and default flag maps
│   ├── misc.ts              # Miscellaneous UI constants
│   ├── query-limit.ts       # API query limit constants
│   ├── resource-identifier.ts # commercetools resource type strings
│   └── storage.ts           # Browser storage key constants
├── utils/               # Shared utility functions
└── index.ts             # Public API — all exports

This package is configured for tree-shaking, allowing consumers to import only what they need.

Usage

Install the package:

pnpm add @commercetools/merchant-center-shared-ui

Import components or constants:

import {
  ComponentName,
  STORAGE_KEYS,
  FEATURE_FLAGS,
} from '@commercetools/merchant-center-shared-ui';

Constants

All constants are exported from src/constants/ and re-exported from the package root. There are two supported import styles:

Namespace imports

Import the whole group as a namespace object:

import {
  STORAGE_KEYS,
  QUERY_LIMIT,
  RESOURCE_IDENTIFIER,
  MISC,
  FEATURE_FLAGS,
} from '@commercetools/merchant-center-shared-ui';

Flat named imports

Import individual values by name (particularly useful for constants already referenced by name in existing code):

import {
  ENABLE_ORDERS,
  ENABLE_CUSTOMERS,
  SHARED_DEFAULT_SHORT_LIVED_FLAGS,
  SHARED_DEFAULT_LONG_LIVED_FLAGS,
} from '@commercetools/merchant-center-shared-ui';

Feature Toggles

Overview

Feature toggle keys and their flopflip default-value maps live in src/constants/feature-toggles.ts. Centralising them here ensures that every application in the monorepo references the same key strings and starts from the same default values, eliminating drift between applications.

Documentation

Storybook stories for all components in this package can be found in the main Storybook instance.