refactor(update docs and fix initial props): update docs and fix comp…

README.md

@@ -40,8 +40,8 @@ You can still access the 1.X designs by passing theme.name === "classic" to the
 We created a separate breaking change branch to make sure our bundles are small and optimized. We didn't want to bundle any uneccesary code to support the "classic" theme so 3.0 has removed all the deprecated code. There are breaking changes and a
 
 - [Inbox migration guide](https://github.com/trycourier/courier-react/tree/main/packages/react-inbox/README.md)
-- [Toast migration guide](https://github.com/trycourier/courier-react/tree/main/packages/react-toast/docs/0.overview.md)
-- [Hooks migration guide](https://github.com/trycourier/courier-react/tree/main/packages/react-hooks/0.overview.md)
+- [Toast migration guide](https://github.com/trycourier/courier-react/tree/main/packages/react-toast/docs/1.overview.md)
+- [Hooks migration guide](https://github.com/trycourier/courier-react/tree/main/packages/react-hooks/README.md)
 
 ### 4.x
 

packages/components/README.md

@@ -27,7 +27,7 @@ Installation is simple. All you need to do is add `<courier>` components to your
 1. Setup Courier Configurations
 2. Download the Components
 
-> Note in v4.10.0 we moved to a CDN instead of s3.  The new url is https://components.courier.com
+> Note in v4.10.0 we moved to a CDN instead of s3. The new url is https://components.courier.com
 
 > This section covers synchronous initialization where you have all information like the `clientKey` and `userId` available on first render. See `Async Initialization` below for how to control the initialization.
 
@@ -51,16 +51,66 @@ Installation is simple. All you need to do is add `<courier>` components to your
 
 ## [Config Option](#config-options)
 
-The supported configuration of `window.courierConfig` are:
+The supported configuration of `window.courierConfig` are the following:
 
-| Key        | Type              | Description                                                                                                           |
-| ---------- | ----------------- | --------------------------------------------------------------------------------------------------------------------- |
-| clientKey  | `string`          | Key associated with your account. Found on https://app.courier.com/integrations/courier                               |
-| userId     | `string`          | The current user logged into your app. Associated with Courier's `recipientId`                                        |
-| initOnLoad | `boolean`         | If you don't want Courier to try and render the components right away, you can pass this flag to defer initialization |
-| components | `ComponentConfig` | Map of configuration for each component (`toast` and `inbox`) on the page                                             |
+```ts
+interface ICourierConfig {
+  // the tenant you would live to scope your requests to
+  tenantId?: string;
+  // override to render a separate brand from the default brand
+  brandId?: string;
+
+  // ~~AUTHENTICATION~~
+
+  // JWT authentication token
+  // no other auth is required if you use this token
+  authorization?: string;
+
+  // required if no JWT
+  // found at app.courier.com/integrations/courier
+  clientKey?: string;
+
+  // required if no JWT
+  userId?: string;
+  // optional HMAC signature
+  userSignature?: string;
+
+  // by default we do not observe the dom for changes.  you can use this option to automatically render components when they
+  // are added to the dom.  note:  this may have performance impacts.
+  enableMutationObserver?: boolean;
+
+  // CSS theme overrides
+  theme?: ProviderTheme;
+
+  // handler that runs whenever a route changes.  this is useful for SPA apps to configure a router.push with
+  onRouteChange?: (route: string) => void;
+
+  // intercept function to incercept a message before rendering
+  onMessage?: Interceptor;
+
+  // component configuration
+  components?: {
+    inbox?: IInboxProps;
+    toast?: ToastConfig;
+    preferences?: PreferencesConfig;
+  };
+
+  // defaults to true, turn this off if you would like to wait for us to analyze the dom
+  initOnLoad?: boolean;
+
+  // websocket options
+  wsOptions?: WSOptions;
+}
+
+type WSOptions = {
+  onError?: ErrorEventHandler;
+  onClose?: () => void;
+  onReconnect?: () => void;
+  connectionTimeout?: number;
+};
+```
 
-> The components will not render unless we have both the `userId` and `clientKey`
+> The components will not render unless we have user information and some for of authentication.
 
 ## [Asynchronous Initialization](#async-init)
 

packages/react-inbox/src/components/Inbox/index.tsx

@@ -89,10 +89,6 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
   const ref = useRef(null);
   const courierContext = useCourier<{ inbox: InboxProps }>();
 
-  if (!courierContext) {
-    throw new Error("Missing Courier Provider");
-  }
-
   // set defaults
   props = useMemo(() => {
     return deepExtend(
@@ -299,4 +295,15 @@ const Inbox: React.FunctionComponent<InboxProps> = (props) => {
   );
 };
 
-export default Inbox;
+const InboxWrapper: React.FunctionComponent<InboxProps> = (props) => {
+  const courierContext = useCourier<{ inbox: InboxProps }>();
+
+  if (!courierContext) {
+    console.warn("Inbox: Missing Courier Provider");
+    return null;
+  }
+
+  return <Inbox {...props} />;
+};
+
+export default InboxWrapper;

packages/react-provider/src/index.tsx

@@ -95,7 +95,7 @@ const GlobalThemeVariables = createGlobalStyle<{
 export const CourierContext =
   React.createContext<ICourierContext | undefined>(undefined);
 
-export const CourierProvider: React.FunctionComponent<
+const CourierProviderInner: React.FunctionComponent<
   PropsWithChildren<ICourierProviderProps>
 > = ({
   apiUrl,
@@ -315,3 +315,14 @@ export const CourierProvider: React.FunctionComponent<
     </CourierContext.Provider>
   );
 };
+
+export const CourierProvider: React.FunctionComponent<
+  PropsWithChildren<ICourierProviderProps>
+> = (props) => {
+  if (!props.clientKey && !props.authorization) {
+    console.warn("Missing ClientKey or Authorization Token");
+    return <>{props.children}</>;
+  }
+
+  return <CourierProviderInner {...props} />;
+};

packages/react-toast/src/components/Toast/index.tsx

@@ -23,11 +23,6 @@ const GlobalStyle = createGlobalStyle`${toastCss}`;
 
 export const Toast: React.FunctionComponent<IToastConfig> = (props) => {
   const courierContext = useCourier();
-
-  if (!courierContext) {
-    throw new Error("Missing Courier Provider");
-  }
-
   const { transport, dispatch, brand: courierBrand } = courierContext;
 
   const brand = props?.brand ?? courierBrand;
@@ -103,4 +98,15 @@ export const Toast: React.FunctionComponent<IToastConfig> = (props) => {
   );
 };
 
-export default Toast;
+const ToastWrapper: React.FunctionComponent<IToastConfig> = (props) => {
+  const courierContext = useCourier();
+
+  if (!courierContext) {
+    console.warn("Toast: Missing Courier Provider");
+    return null;
+  }
+
+  return <Toast {...props} />;
+};
+
+export default ToastWrapper;

packages/storybook/package.json

@@ -11,7 +11,7 @@
   },
   "scripts": {
     "export:storybook": "build-storybook -c .storybook -o .out",
-    "storybook": "start-storybook -p 6320"
+    "storybook": "export NODE_OPTIONS=--openssl-legacy-provider && start-storybook -p 6320"
   },
   "license": "MIT",
   "dependencies": {