@trycourier/courier-react-components 1.0.1

package/src/hooks/use-courier.tsx

@@ -0,0 +1,131 @@
+import React from 'react';
+import { Courier, CourierProps, InboxMessage } from '@trycourier/courier-js';
+import { CourierInboxDatastore, CourierInboxDataStoreListener, CourierInboxFeedType, InboxDataSet } from '@trycourier/courier-ui-inbox';
+
+type AuthenticationHooks = {
+  userId?: string,
+  signIn: (props: CourierProps) => void,
+  signOut: () => void
+}
+
+type InboxHooks = {
+  load: (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => Promise<void>,
+  fetchNextPageOfMessages: (props: { feedType: CourierInboxFeedType }) => Promise<InboxDataSet | null>,
+  setPaginationLimit: (limit: number) => void,
+  readMessage: (message: InboxMessage) => Promise<void>,
+  unreadMessage: (message: InboxMessage) => Promise<void>,
+  clickMessage: (message: InboxMessage) => Promise<void>,
+  archiveMessage: (message: InboxMessage) => Promise<void>,
+  openMessage: (message: InboxMessage) => Promise<void>,
+  unarchiveMessage: (message: InboxMessage) => Promise<void>,
+  readAllMessages: () => Promise<void>,
+  inbox?: InboxDataSet,
+  archive?: InboxDataSet,
+  unreadCount?: number,
+  error?: Error
+}
+
+// A hook for managing the shared state of Courier
+// If you want to use more functions, checkout the Courier JS SDK which
+// can be used directly by importing from '@trycourier/courier-js'
+export const useCourier = () => {
+
+  // Authentication Functions
+  const signIn = (props: CourierProps) => Courier.shared.signIn(props);
+  const signOut = () => Courier.shared.signOut();
+
+  // Inbox Functions
+  const loadInbox = (props?: { feedType: CourierInboxFeedType, canUseCache: boolean }) => CourierInboxDatastore.shared.load(props);
+  const fetchNextPageOfMessages = (props: { feedType: CourierInboxFeedType }) => CourierInboxDatastore.shared.fetchNextPageOfMessages(props);
+  const setPaginationLimit = (limit: number) => Courier.shared.paginationLimit = limit;
+  const readMessage = (message: InboxMessage) => CourierInboxDatastore.shared.readMessage({ message });
+  const unreadMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unreadMessage({ message });
+  const clickMessage = (message: InboxMessage) => CourierInboxDatastore.shared.clickMessage({ message });
+  const archiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.archiveMessage({ message });
+  const openMessage = (message: InboxMessage) => CourierInboxDatastore.shared.openMessage({ message });
+  const unarchiveMessage = (message: InboxMessage) => CourierInboxDatastore.shared.unarchiveMessage({ message });
+  const readAllMessages = () => CourierInboxDatastore.shared.readAllMessages();
+
+  // State
+  const [auth, setAuth] = React.useState<AuthenticationHooks>({
+    userId: undefined,
+    signIn,
+    signOut
+  });
+
+  const [inbox, setInbox] = React.useState<InboxHooks>({
+    load: loadInbox,
+    fetchNextPageOfMessages,
+    setPaginationLimit,
+    readMessage,
+    unreadMessage,
+    clickMessage,
+    archiveMessage,
+    openMessage,
+    unarchiveMessage,
+    readAllMessages
+  });
+
+  React.useEffect(() => {
+
+    // Add a listener to the Courier instance
+    const listener = Courier.shared.addAuthenticationListener(() => refreshAuth());
+
+    // Add inbox data store listener
+    const inboxListener = new CourierInboxDataStoreListener({
+      onError: (error: Error) => refreshInbox(error),
+      onDataSetChange: () => refreshInbox(),
+      onPageAdded: () => refreshInbox(),
+      onMessageAdd: () => refreshInbox(),
+      onMessageRemove: () => refreshInbox(),
+      onMessageUpdate: () => refreshInbox(),
+      onUnreadCountChange: () => refreshInbox()
+    });
+    CourierInboxDatastore.shared.addDataStoreListener(inboxListener);
+
+    // Set initial values
+    refreshAuth();
+    refreshInbox();
+
+    // Remove listeners when the component unmounts
+    return () => {
+      listener.remove();
+      inboxListener.remove();
+    };
+  }, []);
+
+  const refreshAuth = () => {
+    const options = Courier.shared.client?.options;
+    setAuth({
+      userId: options?.userId,
+      signIn,
+      signOut
+    });
+  }
+
+  const refreshInbox = (error?: Error) => {
+    const datastore = CourierInboxDatastore.shared;
+    setInbox({
+      load: loadInbox,
+      fetchNextPageOfMessages,
+      setPaginationLimit,
+      readMessage,
+      unreadMessage,
+      clickMessage,
+      archiveMessage,
+      openMessage,
+      unarchiveMessage,
+      readAllMessages,
+      inbox: datastore.inboxDataSet,
+      archive: datastore.archiveDataSet,
+      unreadCount: datastore.unreadCount,
+      error: error,
+    });
+  }
+
+  return {
+    shared: Courier.shared,
+    auth: auth,
+    inbox: inbox,
+  };
+};

package/src/index.tsx

@@ -0,0 +1,21 @@
+// Import core Courier dependencies
+import '@trycourier/courier-js';
+import '@trycourier/courier-ui-inbox';
+
+// Export local hooks
+export { useCourier } from './hooks/use-courier';
+
+// Export components and their props
+export { CourierInboxComponent } from './components/courier-inbox-component';
+export { CourierInboxPopupMenuComponent } from './components/courier-inbox-popup-menu-component';
+
+export type {
+  CourierInboxProps
+} from './components/courier-inbox-component';
+
+export type {
+  CourierInboxPopupMenuProps,
+} from './components/courier-inbox-popup-menu-component';
+
+// Export render context, to be provided by dependent components
+export { CourierRenderContext } from './context/render-context';

package/vite.config.ts

@@ -0,0 +1,94 @@
+import { defineConfig, PluginOption } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import { resolve, dirname } from "node:path";
+import { fileURLToPath } from "node:url";
+import visualizer from "rollup-plugin-visualizer";
+
+// Get the root directory path of the current file
+const root = dirname(fileURLToPath(import.meta.url));
+
+// Helper function to resolve paths relative to node_modules
+const fromRoot = (p: string) => resolve(root, "../../node_modules", p);
+
+export default defineConfig({
+  // Define environment variables and constants for production build
+  define: {
+    "process.env.NODE_ENV": '"production"',
+    "__DEV__": "false",
+    "import.meta.env.DEV": "false",
+  },
+
+  // Configure module resolution and aliases
+  resolve: {
+    alias: {
+      // Ensure we use the same React instance from node_modules
+      react: fromRoot("react"),
+      "react-dom": fromRoot("react-dom"),
+    },
+    // Prevent duplicate React instances
+    dedupe: ["react", "react-dom"],
+  },
+
+  // Library build configuration
+  build: {
+    lib: {
+      entry: resolve(__dirname, "src/index.tsx"),
+      name: "CourierReactComponents",
+      // Output format: .mjs for ES modules, .cjs for CommonJS
+      fileName: (format) => `index.${format === "es" ? "mjs" : "cjs"}`,
+      formats: ["es", "cjs"],
+    },
+    rollupOptions: {
+      // External dependencies that should not be bundled
+      external: [
+        // Explicitly exclude Courier dependencies _except_ courier-react-components,
+        // which is not distributed independently.
+        /^@trycourier\/.*/,
+        "react",
+        "react-dom",
+        "react-dom/client",
+        "react/jsx-runtime",
+      ],
+      output: {
+        // Global variable names for external dependencies
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+          "react-dom/client": "ReactDOMClient",
+          "@trycourier/courier-js": "CourierJS",
+          "@trycourier/courier-ui-inbox": "CourierInboxUI",
+        },
+      },
+    },
+    sourcemap: true,
+    minify: "terser",
+    terserOptions: {
+      compress: {
+        drop_console: false,
+        drop_debugger: false
+      }
+    }
+  },
+
+  // Build plugins configuration
+  plugins: [
+    // React plugin for JSX support
+    react(),
+    // TypeScript declaration files generation
+    dts({
+      insertTypesEntry: true,
+      include: ["src/**/*.tsx"],
+      exclude: ["src/__tests__/**"],
+    }) as PluginOption,
+    // Bundle size visualization
+    visualizer({
+      open: false,
+      gzipSize: true,
+      brotliSize: true,
+      template: "treemap",
+      sourcemap: true,
+      filename: "stats.html",
+    }) as PluginOption,
+  ],
+});