notificare-react-preview-components 1.0.0 → 1.2.0

package/dist/types.d.ts

@@ -1,5 +1,81 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 
+declare const PUSH_TRANSLATIONS: {
+    'controls.platform': string;
+    'controls.formFactor': string;
+    'controls.operatingSystem': string;
+    'controls.operatingSystem.macos': string;
+    'controls.variant': string;
+    'controls.displayMode.lockScreen': string;
+    'controls.displayMode.expandedLockScreen': string;
+    'controls.displayMode.appUi': string;
+    'preview.error.notGeneratedPreview': string;
+    'preview.error.checkConsole': string;
+    'preview.error.invalidNotification': string;
+    'preview.error.provideGoogleMapsApiKey': string;
+    'preview.error.notSupportedPreviewVariant': string;
+    'preview.error.invalidUrl': string;
+    'preview.error.iosStoreAppNotFound': string;
+    'preview.error.webshotFail': string;
+    'preview.error.notSupportedNotificationTypePreviewVariant': string;
+    'preview.error.notSupportedUrlResolverWithUrlSchemePreview': string;
+    'preview.error.urlResolverInvalidUrl': string;
+    'preview.error.urlResolverNoNotificareWebViewQueryParameter': string;
+    'preview.error.notSupportedUrlResolverWithDynamicLink': string;
+    'preview.error.notSupportedUrlResolverWithRelativeUrl': string;
+    'preview.error.googleMapsAuthFailure': string;
+    'preview.error.googleMapsLoadFailure': string;
+    'preview.error.noValidContentObject': string;
+    'preview.error.iosStoreAppLoadFailure': string;
+    'preview.android.alert.appUi.cancel': string;
+    'preview.android.inAppBrowser.appUi.pageTitleLoading': string;
+    'preview.android.lockscreen.time': string;
+    'preview.ios.alert.appUi.cancel': string;
+    'preview.ios.alert.appUi.ok': string;
+    'preview.ios.inAppBrowser.appUi.done': string;
+    'preview.ios.inAppBrowser.appUi.notSecure': string;
+    'preview.ios.rate.appUi.rateNow': string;
+    'preview.ios.rate.appUi.doNotRate': string;
+    'preview.ios.store.appUi.done': string;
+    'preview.ios.store.appUi.install': string;
+    'preview.ios.store.appUi.ratings': string;
+    'preview.ios.store.appUi.age': string;
+    'preview.ios.store.appUi.yearsOld': string;
+    'preview.ios.store.appUi.category': string;
+    'preview.ios.store.appUi.developer': string;
+    'preview.ios.store.appUi.whatsNew': string;
+    'preview.ios.store.appUi.historyVersion': string;
+    'preview.ios.store.appUi.screenshots': string;
+    'preview.ios.lockScreen.time': string;
+    'preview.web.desktop.macos.lockScreen.time': string;
+    'preview.web.desktop.macos.lockScreen.settings': string;
+    'preview.web.desktop.macos.lockScreen.options': string;
+};
+/**
+ * The set of translation keys for push notification previews.
+ */
+type NotificarePushTranslationKey = keyof typeof PUSH_TRANSLATIONS;
+
+declare const IN_APP_MESSAGING_TRANSLATIONS: {
+    'preview.error.invalidInAppMessage': string;
+    'preview.error.notGeneratedPreview': string;
+    'preview.error.checkConsole': string;
+};
+/**
+ * The set of translation keys for in-app message previews.
+ */
+type NotificareInAppMessagingTranslationKey = keyof typeof IN_APP_MESSAGING_TRANSLATIONS;
+
+declare const PUSH_ONBOARDING_TRANSLATIONS: {
+    'preview.error.invalidPushOnboardingApplicationInfo': string;
+    'preview.error.notGeneratedPreview': string;
+    'preview.error.checkConsole': string;
+};
+/**
+ * The set of translation keys for push onboarding previews.
+ */
+type NotificarePushOnboardingTranslationKey = keyof typeof PUSH_ONBOARDING_TRANSLATIONS;
+
 /**
  * Defines the structure of a notification object.
  *
@@ -60,26 +136,183 @@ interface NotificareNotificationAttachment {
 /**
  * Defines the notification preview variant to be shown.
  */
-type NotificareNotificationVariant = 'android-lockscreen' | 'android-lockscreen-expanded' | 'android-app-ui' | 'ios-lockscreen' | 'ios-lockscreen-expanded' | 'ios-app-ui' | 'web-desktop-macos' | 'web-iphone-app-ui' | 'web-android-app-ui';
+type NotificareNotificationPreviewVariant = 'android-lockscreen' | 'android-lockscreen-expanded' | 'android-app-ui' | 'ios-lockscreen' | 'ios-lockscreen-expanded' | 'ios-app-ui' | 'web-desktop-macos' | 'web-iphone-app-ui' | 'web-android-app-ui';
+
+/**
+ * Defines the structure of an in-app message object.
+ *
+ * @property {string} type - The type of the in-app message (e.g., "re.notifica.inappmessage.Banner", "re.notifica.inappmessage.Card").
+ * @property {string} [title] - The title of the in-app message (optional).
+ * @property {string} [message] - The message of the in-app message (optional).
+ * @property {string} [image] - The image of the in-app message (optional).
+ * @property {NotificareInAppMessageAction} [primaryAction] - The primary action of the in-app message (optional).
+ * @property {NotificareInAppMessageAction} [secondaryAction] - The secondary action of the in-app message (optional).
+ */
+interface NotificareInAppMessage {
+    readonly type: string;
+    readonly title?: string;
+    readonly message?: string;
+    readonly image?: string;
+    readonly primaryAction?: NotificareInAppMessageAction;
+    readonly secondaryAction?: NotificareInAppMessageAction;
+}
+/**
+ * Defines an action associated with the in-app message.
+ *
+ * @property {string} [label] - The label for the action (option).
+ * @property {boolean} [destructive] - Whether the action performs an irreversible operation (optional).
+ */
+interface NotificareInAppMessageAction {
+    readonly label?: string;
+    readonly destructive?: boolean;
+}
+
+/**
+ * Defines partial information of a Notificare app.
+ *
+ * @property {string} [name] - The name of the application (optional).
+ * @property {string} websitePushConfig - The Website Push configuration of the app.
+ */
+interface NotificarePushOnboardingApplicationInfo {
+    readonly name?: string;
+    readonly websitePushConfig: NotificarePushOnboardingWebsitePushConfig;
+}
+/**
+ * Defines the Website Push configuration of an app.
+ *
+ * @property {string} [icon] - The icon to be displayed in a native browser notification (optional).
+ * @property {NotificarePushOnboardingLaunchConfig} launchConfig - Set of launch options.
+ */
+interface NotificarePushOnboardingWebsitePushConfig {
+    readonly icon?: string;
+    readonly launchConfig: NotificarePushOnboardingLaunchConfig;
+}
+/**
+ * Defines the launch configuration of an app.
+ *
+ * @property {string} [applicationName] - A custom application name to replace the original one at the top of a dialog (optional).
+ * @property {NotificarePushOnboardingFloatingButtonOptions} [floatingButtonOptions] - Set of floating button customization options (optional).
+ * @property {NotificarePushOnboardingAutoOnboardingOptions} [autoOnboardingOptions] - Set of dialog customization options (optional).
+ */
+interface NotificarePushOnboardingLaunchConfig {
+    readonly applicationName?: string;
+    readonly floatingButtonOptions?: NotificarePushOnboardingFloatingButtonOptions;
+    readonly autoOnboardingOptions?: NotificarePushOnboardingAutoOnboardingOptions;
+}
+/**
+ * Defines the floating button customization options.
+ *
+ * @property {NotificarePushOnboardingFloatingButtonAlignment} alignment - Defines the horizontal and vertical alignment of the floating button.
+ * @property {NotificarePushOnboardingFloatingButtonPermissionTexts} permissionTexts - Custom texts for the tooltip on the floating button based on the remote notification permission status.
+ */
+interface NotificarePushOnboardingFloatingButtonOptions {
+    readonly alignment: NotificarePushOnboardingFloatingButtonAlignment;
+    readonly permissionTexts: NotificarePushOnboardingFloatingButtonPermissionTexts;
+}
+/**
+ * Defines the horizontal and vertical alignment of the floating button.
+ *
+ * @property {NotificarePushOnboardingFloatingButtonHorizontalAlignment} horizontal - The horizontal alignment.
+ * @property {NotificarePushOnboardingFloatingButtonVerticalAlignment} vertical - The vertical alignment.
+ */
+interface NotificarePushOnboardingFloatingButtonAlignment {
+    readonly horizontal: NotificarePushOnboardingFloatingButtonHorizontalAlignment;
+    readonly vertical: NotificarePushOnboardingFloatingButtonVerticalAlignment;
+}
+type NotificarePushOnboardingFloatingButtonHorizontalAlignment = 'start' | 'end';
+type NotificarePushOnboardingFloatingButtonVerticalAlignment = 'top' | 'bottom';
+/**
+ * Specifies custom texts for the tooltip on the floating button based on the remote notification permission status.
+ *
+ * @property {string} default - The text to be displayed when remote notifications were neither allowed nor denied by the user.
+ * @property {string} granted - The text to be displayed when the user allows remote notifications.
+ * @property {string} denied - The text to be displayed when the user denies remote notifications.
+ */
+interface NotificarePushOnboardingFloatingButtonPermissionTexts {
+    readonly default: string;
+    readonly granted: string;
+    readonly denied: string;
+}
+/**
+ * Defines the dialog customization options.
+ *
+ * @property {string} message - The main message of the dialog.
+ * @property {string} cancelButton - The text on the cancel button.
+ * @property {string} acceptButton - The text on the accept button.
+ */
+interface NotificarePushOnboardingAutoOnboardingOptions {
+    readonly message: string;
+    readonly cancelButton: string;
+    readonly acceptButton: string;
+}
+
+/**
+ * The remote notification permission status.
+ */
+type NotificarePushOnboardingPermissionStatus = 'default' | 'granted' | 'denied';
+
+/**
+ * The language/region code for the UI.
+ */
+type NotificareNotificationPreviewLocale = string;
 
-declare function NotificareNotificationPreview({ notification, applicationId, showControls, variant, serviceKey, googleMapsAPIKey, }: NotificareNotificationPreviewProps): react_jsx_runtime.JSX.Element;
 /**
  * Component that displays a notification preview for different platforms.
  *
  * @param {NotificareNotification} notification - The notification to be displayed in the preview.
  * @param {string} applicationId - The unique identifier of a Notificare application (optional).
  * @param {boolean} [showControls] - Whether the controls should be shown (optional). It's true by default.
- * @param {NotificareNotificationVariant} variant - The variant of the notification preview (optional). It's 'android-lockscreen' by default.
- * @property {string} [serviceKey] - A service key provided by a Notificare admin.
- * @property {string} [googleMapsAPIKey] - A Google Maps API key (optional).
+ * @param {NotificareNotificationPreviewVariant} variant - The variant of the notification preview (optional). It's 'android-lockscreen' by default.
+ * @param {string} [serviceKey] - A service key provided by a Notificare admin.
+ * @param {string} [googleMapsAPIKey] - A Google Maps API key (optional).
+ * @param {string} [locale] - The language/region code for the UI (optional). It's 'en-US' by default.
+ * @param {string} [translations] - A set of custom translations to override the default ones (optional).
  */
+declare function NotificareNotificationPreview({ notification, applicationId, showControls, variant, serviceKey, googleMapsAPIKey, locale, translations, }: NotificareNotificationPreviewProps): react_jsx_runtime.JSX.Element;
 interface NotificareNotificationPreviewProps {
     notification: NotificareNotification;
     applicationId?: string;
     showControls?: boolean;
-    variant?: NotificareNotificationVariant;
+    variant?: NotificareNotificationPreviewVariant;
     serviceKey: string;
     googleMapsAPIKey?: string;
+    locale?: NotificareNotificationPreviewLocale;
+    translations?: Partial<Record<NotificarePushTranslationKey, string>>;
+}
+
+/**
+ * Component that displays an in-app message preview.
+ *
+ * @param {NotificareInAppMessage} inAppMessage - The in-app message to be displayed in the preview.
+ * @param {string} [locale] - The language/region code for the UI (optional). It's 'en-US' by default.
+ * @param {string} [translations] - A set of custom translations to override the default ones (optional).
+ */
+declare function NotificareInAppMessagePreview({ inAppMessage, locale, translations, }: NotificareInAppMessagePreviewProps): react_jsx_runtime.JSX.Element;
+interface NotificareInAppMessagePreviewProps {
+    inAppMessage: NotificareInAppMessage;
+    locale?: string;
+    translations?: Partial<Record<NotificareInAppMessagingTranslationKey, string>>;
+}
+
+/**
+ * Component that displays a push onboarding preview depending on the launch configurations of an app.
+ *
+ * @param {string} [applicationId] - The unique identifier of a Notificare application (optional).
+ * @param {string} [permissionStatus] - The remote notification permission status (optional). It's 'default' by default.
+ * @param {string} applicationInfo - Partial information from a Notificare application.
+ * @param {string} [serviceKey] - A service key provided by a Notificare admin (optional).
+ * @param {string} [locale] - The language/region code for the UI (optional). It's 'en-US' by default.
+ * @param {string} [translations] - A set of custom translations to override the default ones (optional).
+ */
+declare function NotificarePushOnboardingPreview({ applicationId, permissionStatus, applicationInfo, serviceKey, locale, translations, }: NotificarePushOnboardingPreviewProps): react_jsx_runtime.JSX.Element;
+interface NotificarePushOnboardingPreviewProps {
+    applicationId?: string;
+    permissionStatus?: NotificarePushOnboardingPermissionStatus;
+    applicationInfo: NotificarePushOnboardingApplicationInfo;
+    serviceKey?: string;
+    locale?: string;
+    translations?: Partial<Record<NotificarePushOnboardingTranslationKey, string>>;
 }
 
-export { NotificareNotificationPreview };
+export { NotificareInAppMessagePreview, NotificareNotificationPreview, NotificarePushOnboardingPreview };
+export type { NotificareInAppMessage, NotificareInAppMessageAction, NotificareInAppMessagingTranslationKey, NotificareNotification, NotificareNotificationAction, NotificareNotificationAttachment, NotificareNotificationContent, NotificareNotificationPreviewLocale, NotificareNotificationPreviewVariant, NotificarePushOnboardingApplicationInfo, NotificarePushOnboardingAutoOnboardingOptions, NotificarePushOnboardingFloatingButtonAlignment, NotificarePushOnboardingFloatingButtonHorizontalAlignment, NotificarePushOnboardingFloatingButtonOptions, NotificarePushOnboardingFloatingButtonPermissionTexts, NotificarePushOnboardingFloatingButtonVerticalAlignment, NotificarePushOnboardingLaunchConfig, NotificarePushOnboardingPermissionStatus, NotificarePushOnboardingTranslationKey, NotificarePushOnboardingWebsitePushConfig, NotificarePushTranslationKey };

package/package.json

@@ -1,13 +1,13 @@
 {
   "name": "notificare-react-preview-components",
-  "version": "1.0.0",
+  "version": "1.2.0",
   "description": "A set of React components for your admin applications that lets you preview how Notificare notifications, in-app messages, and wallet passes will appear on a user’s device.",
   "author": "Notificare <info@notificare.com> (https://notificare.com)",
   "license": "MIT",
   "homepage": "https://notificare.com/",
   "repository": {
     "type": "git",
-    "url": "https://github.com/notificare/notificare-react-preview-components.git"
+    "url": "git+https://github.com/notificare/notificare-react-preview-components.git"
   },
   "keywords": [
     "notificare",
@@ -29,13 +29,15 @@
     "lint": "eslint .",
     "prepack": "npm run build",
     "storybook": "storybook dev -p 6006",
-    "test": "jest"
+    "test": "jest",
+    "typecheck": "tsc --noEmit"
   },
   "files": [
     "dist"
   ],
   "dependencies": {
     "@vis.gl/react-google-maps": "^1.5.2",
+    "react-intl": "^7.1.11",
     "zod": "^3.24.1"
   },
   "peerDependencies": {
@@ -47,20 +49,14 @@
     "@babel/preset-env": "^7.26.9",
     "@babel/preset-react": "^7.26.3",
     "@babel/preset-typescript": "^7.27.0",
-    "@chromatic-com/storybook": "^3.2.3",
     "@eslint/js": "^9.18.0",
+    "@rollup/plugin-alias": "^5.1.1",
     "@rollup/plugin-commonjs": "^28.0.3",
-    "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.1",
     "@rollup/plugin-terser": "^0.4.4",
     "@rollup/plugin-typescript": "^12.1.2",
-    "@storybook/addon-essentials": "^8.6.12",
-    "@storybook/addon-interactions": "^8.6.12",
-    "@storybook/addon-onboarding": "^8.6.12",
-    "@storybook/blocks": "^8.6.12",
-    "@storybook/react": "^8.6.12",
-    "@storybook/react-vite": "^8.6.12",
-    "@storybook/test": "^8.6.12",
+    "@storybook/react-vite": "^9.0.4",
+    "@svgr/rollup": "^8.1.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@types/jest": "^29.5.14",
@@ -70,9 +66,12 @@
     "dotenv": "^16.5.0",
     "eslint": "^9.18.0",
     "eslint-config-prettier": "^10.0.1",
+    "eslint-import-resolver-typescript": "^4.4.4",
     "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-prettier": "^5.5.4",
     "eslint-plugin-react": "^7.37.4",
-    "eslint-plugin-storybook": "^0.12.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-storybook": "^9.0.4",
     "globals": "^16.0.0",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
@@ -80,16 +79,23 @@
     "prettier": "^3.5.3",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-intl": "^7.1.11",
     "rollup": "^4.37.0",
     "rollup-plugin-dts": "^6.2.1",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^5.14.0",
-    "storybook": "^8.6.12",
+    "storybook": "^9.0.4",
     "style-loader": "^4.0.0",
+    "ts-jest": "^29.3.4",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^5.7.3",
-    "typescript-eslint": "^8.20.0"
+    "typescript-eslint": "^8.20.0",
+    "vite-plugin-svgr": "^4.3.0",
+    "vite-tsconfig-paths": "^5.1.4"
+  },
+  "overrides": {
+    "storybook": "$storybook"
   }
 }