@nuskin/react-mysite-elements 1.5.0-ui-fixes.11 → 1.5.0

package/README.md

@@ -123,202 +123,6 @@ The main hero component for Mysite pages with advanced scroll behavior and respo
 [];
 ```
 
-### Shopping Dashboard Suite
-
-The Shopping Dashboard provides a complete analytics experience with overview widgets,
-full-detail views, and stateful in-page navigation.
-
-#### Highlights
-
-- Dashboard overview with stats cards and 4 widgets (Top Products, Sign-ups, Conversion Rate, Top Categories)
-- Full views for each widget with filtering, sorting, and pagination
-- History-state navigation between dashboard and full views (back/forward/refresh aware)
-- Loading skeletons and explicit empty/error states
-- Translation-ready text (`getTranslation` + key catalog)
-- Accessibility and test automation support with stable `data-testid` selectors
-- Responsive mobile/desktop rendering with performance-focused optimizations
-
-#### Main Exports
-
-- `ShoppingDashboard`
-- `MysiteDashboardWithNavigation`
-- `ProductOfferDashboard`
-- `PoDashboardWithNavigation`
-- `ProductsFullView`
-- `SignupsFullView`
-- `ConversionRateFullView`
-- `CategoriesFullView`
-- `TopPerformingOffersFullView`
-- `StatsCard`, `DashboardHeader`, `WidgetMenu`
-- `TopSellingProductsList`, `SignupsChart`, `ConversionRateChart`, `TopCategoriesPieChart`, `TopPerformingOffersPieChart`
-
-#### Quick Usage
-
-```tsx
-import React, { useState } from 'react';
-import {
-    MysiteDashboardWithNavigation,
-    mockStats,
-    mockTopProducts,
-    mockConversionData,
-    mockSignupData,
-    mockCategories,
-    mockOrders,
-    mockSignupDetails,
-} from '@nuskin/react-mysite-elements';
-
-export default function DashboardExample() {
-    const [dateRange, setDateRange] = useState('last30days');
-    const [market, setMarket] = useState('all');
-
-    return (
-        <MysiteDashboardWithNavigation
-            stats={mockStats}
-            topProducts={mockTopProducts}
-            conversionData={mockConversionData}
-            signupData={mockSignupData}
-            categories={mockCategories}
-            orders={mockOrders}
-            signups={mockSignupDetails}
-            dateRange={dateRange}
-            market={market}
-            onDateRangeChange={setDateRange}
-            onMarketChange={setMarket}
-        />
-    );
-}
-```
-
-#### Translations (i18n)
-
-The dashboard ships built-in **English** fallback strings for every label (see the
-`ShoppingDashboardTranslationKeys` catalog). To localize, pass an optional
-`translate` resolver — `(key, fallback) => string` — into the top-level component.
-Every internal `getTranslation` call routes through it; any key the resolver can't
-localize (or an empty/throwing result) safely falls back to the built-in English text,
-so partial catalogs are fine. Omit the prop to keep the current English-only behavior.
-
-```tsx
-import { MysiteDashboardWithNavigation } from '@nuskin/react-mysite-elements';
-// e.g. a ContentStack-backed resolver in the host app
-import { translate } from '@/utils/translation';
-
-<MysiteDashboardWithNavigation
-    translate={translate} // (key: string, fallback: string) => string
-    stats={stats}
-    /* …other props… */
-/>;
-```
-
-A declarative `TranslationProvider` and a `useTranslation()` hook are also exported for
-advanced/standalone usage:
-
-```tsx
-import { TranslationProvider } from '@nuskin/react-mysite-elements';
-
-<TranslationProvider translate={translate}>{/* any dashboard components */}</TranslationProvider>;
-```
-
-Translation keys follow the `shoppingDashboard.*` namespace; the host maps these to its
-locale resources.
-
-#### Storybook
-
-Shopping Dashboard stories are available under the `ShoppingDashboard` group, including
-loading, error, navigation, and full-view scenarios.
-
-#### Product Offer Dashboard
-
-```tsx
-import {
-    PoDashboardWithNavigation,
-    mockProductOfferStats,
-    mockTopProducts,
-    mockConversionData,
-    mockTopOffers,
-} from '@nuskin/react-mysite-elements';
-
-export default function ProductOfferDashboardExample() {
-    return (
-        <PoDashboardWithNavigation
-            stats={mockProductOfferStats}
-            topProducts={mockTopProducts}
-            conversionData={mockConversionData}
-            topOffers={mockTopOffers}
-        />
-    );
-}
-```
-
-#### Dashboard Architecture
-
-The dashboard is a **presentational (dumb) component library**. It renders whatever
-data the host application passes in and owns none of the data fetching. Hosts
-(`Mysite-Admin`, `Personal-offer-mfe`) are responsible for calling the analytics APIs,
-adapting the raw responses into the view models below, and passing them in as props.
-
-```
-┌──────────────────────── Host application (Mysite-Admin / PO-MFE) ───────────────────────┐
-│  API call  ──▶  adapters (adaptDashboardResponse / drilldownAdapters)  ──▶  view models  │
-└───────────────────────────────────────────┬─────────────────────────────────────────────┘
-                                             │ props (stats, topProducts, categories, …)
-                                             ▼
-        ┌──────────────── *DashboardWithNavigation (stateful wrapper) ────────────────┐
-        │  Owns view state + history-state navigation (overview ⇄ full views)         │
-        │                                                                             │
-        │   ┌── Overview ──────────────┐         ┌── Full views ───────────────────┐  │
-        │   │ StatsCard × n            │         │ ProductsFullView                 │  │
-        │   │ TopSellingProductsList   │  ⇄      │ CategoriesFullView               │  │
-        │   │ ConversionRateChart      │         │ ConversionRateFullView           │  │
-        │   │ TopCategoriesPieChart    │         │ TopPerformingOffersFullView …    │  │
-        │   └──────────────────────────┘         └──────────────────────────────────┘  │
-        │                                                                             │
-        │   shared/ primitives: DataTable · Pagination · FilterBar · PageHeader ·     │
-        │                       WidgetMenu · LoadingSkeletons                         │
-        │   utils/: dataUtils (formatMoney, usePaginatedItems) · trendUtils ·         │
-        │           marketOptions · dateFormat                                        │
-        └──────────────────────────────────────────────────────────────────────────────┘
-```
-
-##### Layers
-
-| Layer             | Location                                                                                                              | Responsibility                                                                   |
-| ----------------- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------- |
-| Stateful wrapper  | `MysiteDashboardWithNavigation`, `PoDashboardWithNavigation`                                                          | View selection, history-state (back/forward/refresh) navigation, prop routing    |
-| Overview screens  | `ShoppingDashboard`, `ProductOfferDashboard`                                                                          | Compose stats cards + widgets for the landing view                               |
-| Widgets           | `shared/TopProducts`, `shared/TopCategories`, `shared/ConversionRate`, `shared/Signups`, `shared/TopPerformingOffers` | Summarized charts/lists shown on the overview                                    |
-| Full views        | `*FullView.tsx` in each `shared/*` folder                                                                             | Detailed tables/charts with filtering, sorting, and pagination                   |
-| Shared primitives | `shared/` (`DataTable`, `Pagination`, `FilterBar`, `PageHeader`, `WidgetMenu`, `LoadingSkeletons`)                    | Reusable building blocks across every screen                                     |
-| Utilities         | `utils/`                                                                                                              | `formatMoney`, `usePaginatedItems`, trend parsing, market/date helpers           |
-| Types             | `types.d.ts`, `types/`                                                                                                | Shared view-model contracts (`TopProduct`, `CategoryRevenue`, `OrderHistory`, …) |
-| Translations      | `TranslationContext.tsx`, `TranslationKeys/`                                                                          | `getTranslation` catalog + optional host `translate` resolver                    |
-
-##### Navigation model
-
-`*DashboardWithNavigation` keeps the active view in local state and mirrors it into
-`window.history` state, so browser **back / forward / refresh** move between the overview
-and a full view without a hard reload. Filter, sort, and page selections live in the
-component that owns the view and reset appropriately when the underlying data changes.
-
-##### Currency formatting
-
-Monetary values are formatted **inside the library** so charts, totals, and sorting keep
-working with numeric revenue while still displaying the correct symbol. Each data item
-carries an optional `currencyCode` (ISO code, e.g. `USD`, `EUR`) that the host adapters
-stamp from the API `currency_code` field. Rendering goes through the `formatMoney` helper:
-
-```ts
-formatMoney(value, currencyCode?, locale = 'en-US', fractionDigits?)
-```
-
-- When `currencyCode` is present it uses `Intl.NumberFormat` (code → symbol) with natural
-  decimals (`0`–`2`); pass `fractionDigits` to force fixed decimals (order totals use `2`).
-- When `currencyCode` is missing or invalid it falls back to a `$` prefix, so existing
-  behavior is preserved.
-
-Hosts should populate `currencyCode` on every money-bearing item (products, categories,
-offers, order rows). See `HOST_APP_API_RESPONSE.md` for the expected API payload shape.
-
 ## ✨ Advanced Features
 
 ### Intelligent Scroll Behavior
@@ -446,36 +250,6 @@ The component automatically detects and integrates with Nu Skin's external heade
 4. Push to the branch (`git push origin feature/amazing-feature`)
 5. Open a Pull Request
 
-### Constitution Compliance (Required)
-
-All UI contributions must follow the repository constitution in
-`.specify/memory/constitution.md`.
-
-Core non-negotiable rules:
-
-- No inline CSS in production components (`style={{}}`, inline `sx`, runtime `.style` mutation)
-- Styled component definitions must live in dedicated `*.styled.tsx` files, not inside component files
-- No hardcoded user-visible strings in component code (use translation keys)
-- Accessibility-first implementation (ADA/WCAG aligned)
-- Mobile and desktop viewport validation for changed flows
-- Stable `data-testid` selectors for critical interactions
-
-PR validation checklist:
-
-- [ ] UI styles are in stylesheet/styled-component files only
-- [ ] Styled components are defined in `*.styled.tsx` files, not inline in component files
-- [ ] All user-facing text is sourced from translation files
-- [ ] Keyboard and semantic accessibility checks were completed
-- [ ] Mobile and desktop behavior was validated
-- [ ] Critical interactive elements include `data-testid`
-
-Recommended verification commands:
-
-```bash
-npx jest --testPathPattern="shopping-dashboard" --no-coverage
-npx tsc --noEmit --project tsconfig.json
-```
-
 ### Commit Convention
 
 We use [Conventional Commits](https://www.conventionalcommits.org/) for semantic versioning:

package/dist/common/carousel/ProductTabCarousel.d.ts

@@ -34,7 +34,7 @@ interface ProductTabCarouselProps {
     readonly emptyProductMessage?: string;
     readonly showCustomCategory?: boolean;
     readonly productsCountLabel?: string;
-    readonly getCategoryId?: (categoryId: string) => Promise<Category[]>;
+    readonly getCategoryId: (categoryId: string) => Promise<Category[]>;
     readonly history?: {
         push: (path: string) => void;
     };

package/dist/common/headers/MysiteHero.d.ts

@@ -1,5 +1,10 @@
 import { ReactElement } from 'react';
-type MysiteHeroProps = {
+/**
+ * `MysiteHero`'s prop contract, and the single definition of that shape.
+ * `@nuskin/react-mysite-sdk`'s `buildHeroProps` imports this as its return type
+ * so the producer and the consumer can never drift.
+ */
+export type MysiteHeroProps = {
     readonly imageDetails?: {
         imageSrc: string;
         imageAlt: string;
@@ -25,4 +30,3 @@ type MysiteHeroProps = {
     readonly totalSavings?: string;
 };
 export default function MysiteHero({ className, shopTitle, shopDescription, socialTitleText, imageDetails, email, phone, bannerProps, socialIcons, expirationDate, showBadges, totalSavings, }: MysiteHeroProps): ReactElement;
-export {};

package/dist/common/headers/index.d.ts

@@ -1 +1,2 @@
 export { default as MysiteHero } from './MysiteHero';
+export type { MysiteHeroProps } from './MysiteHero';

package/dist/common/index.d.ts

@@ -2,4 +2,3 @@ export * from './card';
 export * from './carousel';
 export * from './headers';
 export * from './Nav-Category-Navigation';
-export * from './shopping-dashboard';

package/dist/index.d.ts

@@ -1 +1 @@
-export * from './common';
+export * from './ui';