notificare-react-preview-components 1.0.0

package/dist/types.d.ts

@@ -0,0 +1,85 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Defines the structure of a notification object.
+ *
+ * @property {string} type - The type of the notification (e.g., "re.notifica.notification.Alert", "re.notifica.notification.WebView").
+ * @property {string} [title] - The title of the notification (optional).
+ * @property {string} [subtitle] - The subtitle of the notification (optional).
+ * @property {string} message - The message of the notification.
+ * @property {NotificareNotificationContent[]} [content] - An array of content objects associated with the notification (optional). Their structure depends on the notification type.
+ * @property {NotificareNotificationAction[]} [actions] - An array of actions associated with the notification (optional).
+ * @property {NotificareNotificationAttachment[]} [attachments] - An array of attachments associated with the notification (optional).
+ */
+interface NotificareNotification {
+    readonly type: string;
+    readonly title?: string;
+    readonly subtitle?: string;
+    readonly message: string;
+    readonly content?: NotificareNotificationContent[];
+    readonly actions?: NotificareNotificationAction[];
+    readonly attachments?: NotificareNotificationAttachment[];
+}
+/**
+ * Defines the content associated with the notification.
+ *
+ * @property {string} type - The type of content.
+ * @property {unknown} data - The content data. Its structure depends on the type.
+ */
+interface NotificareNotificationContent {
+    readonly type: string;
+    readonly data: unknown;
+}
+/**
+ * Defines an action associated with the notification.
+ *
+ * @property {string} type - The type of action (e.g., "re.notifica.action.Callback", "re.notifica.action.SMS").
+ * @property {string} label - The label for the action.
+ * @property {string} [target] - The target of the action (optional).
+ * @property {boolean} [camera] - Whether the action involves a camera (optional).
+ * @property {boolean} [keyboard] - Whether the action involves a keyboard (optional).
+ */
+interface NotificareNotificationAction {
+    readonly type: string;
+    readonly label: string;
+    readonly target?: string;
+    readonly camera?: boolean;
+    readonly keyboard?: boolean;
+}
+/**
+ * Defines an attachment associated with the notification.
+ *
+ * @property {string} mimeType - The MIME type of the attachment (e.g., "image/jpeg", "image/png").
+ * @property {string} uri - The URI of the attachment.
+ */
+interface NotificareNotificationAttachment {
+    readonly mimeType: string;
+    readonly uri: string;
+}
+
+/**
+ * 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';
+
+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).
+ */
+interface NotificareNotificationPreviewProps {
+    notification: NotificareNotification;
+    applicationId?: string;
+    showControls?: boolean;
+    variant?: NotificareNotificationVariant;
+    serviceKey: string;
+    googleMapsAPIKey?: string;
+}
+
+export { NotificareNotificationPreview };

package/package.json

@@ -0,0 +1,95 @@
+{
+  "name": "notificare-react-preview-components",
+  "version": "1.0.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"
+  },
+  "keywords": [
+    "notificare",
+    "react",
+    "preview",
+    "components",
+    "notifications",
+    "in-app-messaging",
+    "wallet"
+  ],
+  "main": "dist/cjs/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types.d.ts",
+  "scripts": {
+    "build": "npm run clean; rollup -c",
+    "build-storybook": "storybook build",
+    "clean": "rm -rf dist",
+    "dev": "rollup -c -w",
+    "lint": "eslint .",
+    "prepack": "npm run build",
+    "storybook": "storybook dev -p 6006",
+    "test": "jest"
+  },
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@vis.gl/react-google-maps": "^1.5.2",
+    "zod": "^3.24.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.26.10",
+    "@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-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",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.3.0",
+    "@types/jest": "^29.5.14",
+    "@types/leaflet": "^1.9.16",
+    "@types/react": "^19.0.7",
+    "babel-jest": "^29.7.0",
+    "dotenv": "^16.5.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-import": "^2.31.0",
+    "eslint-plugin-react": "^7.37.4",
+    "eslint-plugin-storybook": "^0.12.0",
+    "globals": "^16.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
+    "prettier": "^3.5.3",
+    "react": "^19.1.0",
+    "react-dom": "^19.1.0",
+    "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",
+    "style-loader": "^4.0.0",
+    "ts-node": "^10.9.2",
+    "tslib": "^2.8.1",
+    "typescript": "^5.7.3",
+    "typescript-eslint": "^8.20.0"
+  }
+}