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

package/dist/ui/index.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@nuskin/react-mysite-elements",
-    "version": "1.5.0-ui-fixes.11",
+    "version": "1.5.0",
     "description": "A React based component library for mysite",
     "types": "dist/index.d.ts",
     "main": "dist/index.js",
@@ -21,8 +21,6 @@
     "license": "MIT",
     "scripts": {
         "build:package": "tsup",
-        "build": "tsup",
-        "build:watch": "tsup --watch",
         "build-dev": "yarn build-storybook",
         "build-test": "yarn build-storybook",
         "build-prod": "yarn build-storybook --mode=production",
@@ -41,17 +39,17 @@
         "@mui/material": "5.14.16",
         "@types/react": "18.3.22",
         "@types/react-dom": "18.3.7",
-        "exceljs": "4.4.0",
         "react-circular-progressbar": "2.2.0",
         "react-icons": "4.12.0",
-        "react-slick": "0.29.0",
-        "recharts": "^2.15.0"
+        "react-slick": "0.29.0"
     },
     "devDependencies": {
         "@babel/core": "7.27.1",
         "@babel/preset-env": "7.27.2",
         "@babel/preset-react": "7.27.1",
         "@babel/preset-typescript": "7.27.1",
+        "@nuskin/foundation-theme": "1.x",
+        "@nuskin/foundation-ui-components": "2.1.2",
         "@storybook/addon-docs": "9.1.10",
         "@storybook/jest": "0.2.3",
         "@storybook/nextjs": "9.1.10",
@@ -68,11 +66,10 @@
         "@types/react-test-renderer": "18.3.1",
         "@typescript-eslint/eslint-plugin": "8.32.1",
         "@typescript-eslint/parser": "8.32.1",
-        "@nuskin/foundation-theme": "1.x",
-        "@nuskin/foundation-ui-components": "2.1.2",
         "babel-jest": "29.7.0",
         "babel-loader": "9.2.1",
         "babel-plugin-emotion": "11.0.0",
+        "core-js": "^3.50.0",
         "eslint": "8.57.1",
         "eslint-config-next": "15.5.4",
         "eslint-config-prettier": "10.1.5",
@@ -86,18 +83,17 @@
         "jest-environment-jsdom": "29.7.0",
         "next": "15.5.4",
         "prettier": "3.5.3",
+        "react": "18.3.1",
+        "react-dom": "18.3.1",
         "storybook": "9.1.10",
         "tsup": "8.5.0",
-        "typescript": "5.8.3",
-        "react": "18.3.1",
-        "react-dom": "18.3.1"
+        "typescript": "5.8.3"
     },
     "peerDependencies": {
         "@nuskin/foundation-theme": "1.x",
         "@nuskin/foundation-ui-components": "2.x",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
-        "recharts": "^2.0.0",
         "typescript": "^5.4.2"
     },
     "resolutions": {
@@ -105,8 +101,7 @@
         "@nuskin/foundation-ui-components": "2.x",
         "esbuild": "0.25.0",
         "@babel/runtime": "7.26.10",
-        "@babel/helpers": "7.26.10",
-        "lodash": "^4.18.0"
+        "@babel/helpers": "7.26.10"
     },
     "files": [
         "dist",
@@ -114,26 +109,13 @@
         "package.json"
     ],
     "readme": "./README.md",
+    "sideEffects": false,
     "exports": {
         ".": {
             "types": "./dist/index.d.ts",
             "import": "./dist/index.mjs",
             "require": "./dist/index.js"
         },
-        "./*": {
-            "types": "./dist/*/index.d.ts",
-            "import": "./dist/*/index.mjs",
-            "require": "./dist/*/index.js"
-        }
-    },
-    "typesVersions": {
-        "*": {
-            "*": [
-                "./dist/*/index.d.ts"
-            ],
-            ".": [
-                "./dist/index.d.ts"
-            ]
-        }
+        "./package.json": "./package.json"
     }
 }

package/dist/common/icon/icons/SocialMediaIcons.styled.d.ts

@@ -1,5 +0,0 @@
-export declare const StyledButton: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
-    ref?: ((instance: HTMLDivElement | null) => void | import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof import("react").DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES]) | import("react").RefObject<HTMLDivElement> | null | undefined;
-}, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme> & {
-    brandColor: string;
-}, {}, {}>;

package/dist/common/shopping-dashboard/MysiteDashboardWithNavigation.d.ts

@@ -1,55 +0,0 @@
-import React from 'react';
-import type { TranslateFn } from './TranslationKeys/translationResolver';
-import type { DashboardStats, TopProduct, ConversionDataPoint, SignupDataPoint, CategoryRevenue, OrderHistory, SignupDetail, DateRangeOption, MarketOption, MarketFilterOption, ProductSortOption, SignupViewOption, ConversionFilterOption, CategorySortOption, FullViewWidgetType } from './types.d';
-export type MysiteDashboardView = 'dashboard' | FullViewWidgetType;
-export interface MysiteDashboardHistoryLocation {
-    readonly pathname?: string;
-    readonly search?: string;
-    readonly hash?: string;
-    readonly state?: unknown;
-}
-export interface MysiteDashboardHistoryAdapter {
-    readonly location?: MysiteDashboardHistoryLocation;
-    push(location: MysiteDashboardHistoryLocation): void;
-    replace(location: MysiteDashboardHistoryLocation): void;
-    goBack(): void;
-    listen(listener: (location: MysiteDashboardHistoryLocation, action: string) => void): () => void;
-}
-export interface MysiteDashboardWithNavigationProps {
-    readonly stats?: DashboardStats | null;
-    readonly topProducts?: TopProduct[];
-    readonly conversionData?: ConversionDataPoint[];
-    readonly signupData?: SignupDataPoint[];
-    readonly categories?: CategoryRevenue[];
-    readonly categoriesSummaryChangePct?: number | null;
-    readonly orders?: OrderHistory[];
-    readonly signups?: SignupDetail[];
-    readonly isLoading?: boolean;
-    readonly error?: string | null;
-    readonly shopTitle?: string;
-    readonly className?: string;
-    readonly translate?: TranslateFn;
-    readonly initialDateRange?: DateRangeOption;
-    readonly initialMarket?: MarketOption;
-    readonly initialProductSort?: ProductSortOption;
-    readonly initialSignupView?: SignupViewOption;
-    readonly initialConversionFilter?: ConversionFilterOption;
-    readonly initialCategorySort?: CategorySortOption;
-    readonly markets?: ReadonlyArray<MarketFilterOption>;
-    readonly historyAdapter?: MysiteDashboardHistoryAdapter;
-    readonly historyStateKey?: string;
-    readonly resetToDashboardOnMount?: boolean;
-    readonly onDateRangeChange?: (range: DateRangeOption) => void;
-    readonly onMarketChange?: (market: MarketOption) => void;
-    readonly onProductSortChange?: (sort: ProductSortOption) => void;
-    readonly onSignupViewChange?: (view: SignupViewOption) => void;
-    readonly onConversionFilterChange?: (filter: ConversionFilterOption) => void;
-    readonly onCategorySortChange?: (sort: CategorySortOption) => void;
-    readonly onViewChange?: (view: MysiteDashboardView) => void;
-    readonly onProductsExport?: () => void;
-    readonly onConversionExport?: () => void;
-    readonly onSignupsExport?: () => void;
-    readonly onCategoriesExport?: () => void;
-}
-export declare const MysiteDashboardWithNavigation: React.FC<MysiteDashboardWithNavigationProps>;
-export default MysiteDashboardWithNavigation;

package/dist/common/shopping-dashboard/PoDashboardWithNavigation.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { PoDashboardWithNavigationProps } from './types.d';
-export declare const PoDashboardWithNavigation: React.FC<PoDashboardWithNavigationProps>;
-export default PoDashboardWithNavigation;

package/dist/common/shopping-dashboard/ProductOfferDashboard.d.ts

@@ -1,4 +0,0 @@
-import React from 'react';
-import type { ProductOfferDashboardProps } from './types.d';
-export declare const ProductOfferDashboard: React.FC<ProductOfferDashboardProps>;
-export default ProductOfferDashboard;

package/dist/common/shopping-dashboard/ProductOfferDashboard.styled.d.ts

@@ -1,20 +0,0 @@
-export declare const PoDashboardContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TopChartsRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StatsCardStack: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const BottomChartsRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/common/shopping-dashboard/ShoppingDashboard.d.ts

@@ -1,37 +0,0 @@
-import React from 'react';
-import type { DashboardStats, TopProduct, ConversionDataPoint, SignupDataPoint, CategoryRevenue, DateRangeOption, MarketOption, MarketFilterOption, ProductSortOption, SignupViewOption, ConversionFilterOption, CategorySortOption } from './types.d';
-export interface ShoppingDashboardProps {
-    readonly stats?: DashboardStats | null;
-    readonly topProducts?: TopProduct[];
-    readonly conversionData?: ConversionDataPoint[];
-    readonly signupData?: SignupDataPoint[];
-    readonly categories?: CategoryRevenue[];
-    readonly isLoading?: boolean;
-    readonly error?: string | null;
-    readonly shopTitle?: string;
-    readonly className?: string;
-    readonly dateRange?: DateRangeOption;
-    readonly market?: MarketOption;
-    readonly productSort?: ProductSortOption;
-    readonly signupView?: SignupViewOption;
-    readonly conversionFilter?: ConversionFilterOption;
-    readonly categorySort?: CategorySortOption;
-    readonly categoriesSummaryChangePct?: number | null;
-    readonly markets?: ReadonlyArray<MarketFilterOption>;
-    readonly onDateRangeChange?: (range: DateRangeOption) => void;
-    readonly onMarketChange?: (market: MarketOption) => void;
-    readonly onProductSortChange?: (sort: ProductSortOption) => void;
-    readonly onSignupViewChange?: (view: SignupViewOption) => void;
-    readonly onConversionFilterChange?: (filter: ConversionFilterOption) => void;
-    readonly onCategorySortChange?: (sort: CategorySortOption) => void;
-    readonly onProductsTitleClick?: () => void;
-    readonly onConversionTitleClick?: () => void;
-    readonly onSignupsTitleClick?: () => void;
-    readonly onCategoriesToTitleClick?: () => void;
-    readonly onProductsExport?: () => void;
-    readonly onConversionExport?: () => void;
-    readonly onSignupsExport?: () => void;
-    readonly onCategoriesExport?: () => void;
-}
-export declare const ShoppingDashboard: React.FC<ShoppingDashboardProps>;
-export default ShoppingDashboard;

package/dist/common/shopping-dashboard/ShoppingDashboard.styled.d.ts

@@ -1,20 +0,0 @@
-export declare const DashboardContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const StatsRow: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const WidgetContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const TwoColumnGrid: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
-export declare const ErrorContainer: import("@emotion/styled").StyledComponent<{
-    theme?: import("@emotion/react").Theme;
-    as?: React.ElementType;
-}, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;

package/dist/common/shopping-dashboard/TranslationContext.d.ts

@@ -1,10 +0,0 @@
-import React from 'react';
-import { type TranslateFn, type TranslationEntry } from './TranslationKeys/translationResolver';
-export declare function useTranslationResolver(translate?: TranslateFn): void;
-export interface TranslationProviderProps {
-    readonly translate?: TranslateFn;
-    readonly children?: React.ReactNode;
-}
-export declare const TranslationProvider: React.FC<TranslationProviderProps>;
-export declare function useTranslation(): (entry: TranslationEntry) => string;
-export type { TranslateFn, TranslationEntry };

package/dist/common/shopping-dashboard/TranslationKeys/ProductOfferDashboardTranslationKeys.d.ts

@@ -1,242 +0,0 @@
-type TranslationEntry = {
-    readonly key: string;
-    readonly fallback: string;
-};
-export declare const ProductOfferDashboardTranslationKeys: {
-    readonly title: {
-        readonly key: "productOfferDashboard.title";
-        readonly fallback: "Performance Overview";
-    };
-    readonly error: {
-        readonly key: "productOfferDashboard.error";
-        readonly fallback: "Failed to load dashboard data. Please try again.";
-    };
-    readonly stats: {
-        readonly revenue: {
-            readonly key: "productOfferDashboard.stats.revenue";
-            readonly fallback: "Total Revenue";
-        };
-        readonly offersPurchased: {
-            readonly key: "productOfferDashboard.stats.offersPurchased";
-            readonly fallback: "Offers Purchased";
-        };
-        readonly conversionRate: {
-            readonly key: "productOfferDashboard.stats.conversionRate";
-            readonly fallback: "Conversion Rate";
-        };
-        readonly trendUp: {
-            readonly key: "productOfferDashboard.stats.trendUp";
-            readonly fallback: "Trending up";
-        };
-        readonly trendDown: {
-            readonly key: "productOfferDashboard.stats.trendDown";
-            readonly fallback: "Trending down";
-        };
-        readonly trendNeutral: {
-            readonly key: "productOfferDashboard.stats.trendNeutral";
-            readonly fallback: "No change";
-        };
-        readonly comparedTo: {
-            readonly key: "productOfferDashboard.stats.comparedTo";
-            readonly fallback: "compared to this time last month";
-        };
-    };
-    readonly filter: {
-        readonly dateRange: {
-            readonly label: {
-                readonly key: "productOfferDashboard.filter.dateRange.label";
-                readonly fallback: "Date Range";
-            };
-            readonly last7days: {
-                readonly key: "productOfferDashboard.filter.dateRange.last7days";
-                readonly fallback: "Last 7 Days";
-            };
-            readonly last30days: {
-                readonly key: "productOfferDashboard.filter.dateRange.last30days";
-                readonly fallback: "Last 30 Days";
-            };
-            readonly last90days: {
-                readonly key: "productOfferDashboard.filter.dateRange.last90days";
-                readonly fallback: "Last 90 Days";
-            };
-            readonly thisMonth: {
-                readonly key: "productOfferDashboard.filter.dateRange.thisMonth";
-                readonly fallback: "This Month";
-            };
-        };
-        readonly market: {
-            readonly label: {
-                readonly key: "productOfferDashboard.filter.market.label";
-                readonly fallback: "Market";
-            };
-            readonly all: {
-                readonly key: "productOfferDashboard.filter.market.all";
-                readonly fallback: "All Markets";
-            };
-        };
-        readonly offerSort: {
-            readonly byRevenue: {
-                readonly key: "productOfferDashboard.filter.offerSort.byRevenue";
-                readonly fallback: "Revenue";
-            };
-            readonly byUnits: {
-                readonly key: "productOfferDashboard.filter.offerSort.byUnits";
-                readonly fallback: "Units";
-            };
-        };
-        readonly productSort: {
-            readonly byUnits: {
-                readonly key: "productOfferDashboard.filter.productSort.byUnits";
-                readonly fallback: "Units";
-            };
-            readonly byRevenue: {
-                readonly key: "productOfferDashboard.filter.productSort.byRevenue";
-                readonly fallback: "Revenue";
-            };
-            readonly byVolume: {
-                readonly key: "productOfferDashboard.filter.productSort.byVolume";
-                readonly fallback: "Volume";
-            };
-        };
-        readonly conversionFilter: {
-            readonly overall: {
-                readonly key: "productOfferDashboard.filter.conversionFilter.overall";
-                readonly fallback: "Overall";
-            };
-        };
-    };
-    readonly widget: {
-        readonly topProducts: {
-            readonly title: {
-                readonly key: "productOfferDashboard.widget.topProducts.title";
-                readonly fallback: "Top Selling Products";
-            };
-            readonly emptyState: {
-                readonly key: "productOfferDashboard.widget.topProducts.emptyState";
-                readonly fallback: "No products data available";
-            };
-        };
-        readonly conversionRate: {
-            readonly title: {
-                readonly key: "productOfferDashboard.widget.conversionRate.title";
-                readonly fallback: "Conversion Rate";
-            };
-            readonly subtitle: {
-                readonly key: "productOfferDashboard.widget.conversionRate.subtitle";
-                readonly fallback: "Orders ÷ Site visits";
-            };
-        };
-        readonly topPerformingOffers: {
-            readonly title: {
-                readonly key: "productOfferDashboard.widget.topPerformingOffers.title";
-                readonly fallback: "Top Performing Offers";
-            };
-            readonly totalRevenue: {
-                readonly key: "productOfferDashboard.widget.topPerformingOffers.totalRevenue";
-                readonly fallback: "Total revenue";
-            };
-            readonly emptyState: {
-                readonly key: "productOfferDashboard.widget.topPerformingOffers.emptyState";
-                readonly fallback: "No offers data available";
-            };
-        };
-        readonly menu: {
-            readonly fullView: {
-                readonly key: "productOfferDashboard.widget.menu.fullView";
-                readonly fallback: "Full View";
-            };
-        };
-    };
-    readonly navigation: {
-        readonly back: {
-            readonly key: "productOfferDashboard.navigation.back";
-            readonly fallback: "Back to Dashboard";
-        };
-    };
-    readonly ariaLabel: {
-        readonly dashboard: {
-            readonly key: "productOfferDashboard.ariaLabel.dashboard";
-            readonly fallback: "Product Offer Performance Dashboard";
-        };
-        readonly statsCard: {
-            readonly key: "productOfferDashboard.ariaLabel.statsCard";
-            readonly fallback: "Performance metric";
-        };
-        readonly conversionChart: {
-            readonly key: "productOfferDashboard.ariaLabel.conversionChart";
-            readonly fallback: "Conversion rate chart";
-        };
-        readonly topProducts: {
-            readonly key: "productOfferDashboard.ariaLabel.topProducts";
-            readonly fallback: "Top selling products";
-        };
-        readonly topOffers: {
-            readonly key: "productOfferDashboard.ariaLabel.topOffers";
-            readonly fallback: "Top performing offers chart";
-        };
-        readonly widgetMenu: {
-            readonly key: "productOfferDashboard.ariaLabel.widgetMenu";
-            readonly fallback: "Widget options menu";
-        };
-        readonly filterDateRange: {
-            readonly key: "productOfferDashboard.ariaLabel.filterDateRange";
-            readonly fallback: "Filter by date range";
-        };
-        readonly filterMarket: {
-            readonly key: "productOfferDashboard.ariaLabel.filterMarket";
-            readonly fallback: "Filter by market";
-        };
-        readonly backButton: {
-            readonly key: "productOfferDashboard.ariaLabel.backButton";
-            readonly fallback: "Back to dashboard overview";
-        };
-    };
-    readonly fullView: {
-        readonly topOffers: {
-            readonly title: {
-                readonly key: "productOfferDashboard.fullView.topOffers.title";
-                readonly fallback: "Top Performing Offers";
-            };
-            readonly columnName: {
-                readonly key: "productOfferDashboard.fullView.topOffers.columnName";
-                readonly fallback: "Offer Name";
-            };
-            readonly columnRevenue: {
-                readonly key: "productOfferDashboard.fullView.topOffers.columnRevenue";
-                readonly fallback: "Revenue";
-            };
-            readonly columnPercentage: {
-                readonly key: "productOfferDashboard.fullView.topOffers.columnPercentage";
-                readonly fallback: "Share";
-            };
-            readonly columnTrend: {
-                readonly key: "productOfferDashboard.fullView.topOffers.columnTrend";
-                readonly fallback: "Trend";
-            };
-        };
-    };
-    readonly defaults: {
-        readonly trendZero: {
-            readonly key: "productOfferDashboard.defaults.trendZero";
-            readonly fallback: "+0%";
-        };
-        readonly noData: {
-            readonly key: "productOfferDashboard.defaults.noData";
-            readonly fallback: "--";
-        };
-        readonly byRevenue: {
-            readonly key: "productOfferDashboard.defaults.byRevenue";
-            readonly fallback: "Revenue";
-        };
-        readonly byUnits: {
-            readonly key: "productOfferDashboard.defaults.byUnits";
-            readonly fallback: "Units";
-        };
-        readonly byVolume: {
-            readonly key: "productOfferDashboard.defaults.byVolume";
-            readonly fallback: "Volume";
-        };
-    };
-};
-export declare function getTranslation(entry: TranslationEntry): string;
-export {};