@knocklabs/react-core 0.1.0

package/.eslintrc.js

@@ -0,0 +1,9 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  root: true,
+  extends: ["@knocklabs/eslint-config/react-internal.js"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: true,
+  },
+};

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# Changelog
+
+## 0.1.0
+
+### Patch Changes
+
+- bcdbc86: Initialize monorepo

package/README.md

@@ -0,0 +1,5 @@
+# @knocklabs/react-core
+
+A set of shared components, hooks, and utilities for working with React and React Native Knock packages.
+
+Not meant to be consumed externally.

package/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@knocklabs/react-core",
+  "description": "A set of React components to build notification experiences powered by Knock",
+  "author": "@knocklabs",
+  "version": "0.1.0",
+  "license": "MIT",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "dependencies": {}
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./modules/core";
+export * from "./modules/feed";
+export * from "./modules/i18n";

package/src/modules/core/constants.ts

@@ -0,0 +1,8 @@
+export enum FilterStatus {
+  All = "all",
+  Read = "read",
+  Unseen = "unseen",
+  Unread = "unread",
+}
+
+export type ColorMode = "light" | "dark";

package/src/modules/core/context/KnockProvider.tsx

@@ -0,0 +1,59 @@
+import * as React from "react";
+import Knock from "@knocklabs/client";
+
+import { useAuthenticatedKnockClient } from "../hooks";
+import { KnockI18nProvider, I18nContent } from "../../i18n";
+
+export interface KnockProviderState {
+  knock: Knock;
+}
+
+const ProviderStateContext = React.createContext<KnockProviderState | null>(
+  null,
+);
+
+export interface KnockProviderProps {
+  // Knock client props
+  apiKey: string;
+  host?: string;
+  // Authentication props
+  userId: string;
+  userToken?: string;
+
+  // Extra options
+  children?: React.ReactElement;
+
+  // i18n translations
+  i18n?: I18nContent;
+}
+
+export const KnockProvider: React.FC<KnockProviderProps> = ({
+  apiKey,
+  host,
+  userId,
+  userToken,
+  children,
+  i18n,
+}) => {
+  const knock = useAuthenticatedKnockClient(apiKey, userId, userToken, {
+    host,
+  });
+
+  return (
+    <ProviderStateContext.Provider
+      value={{
+        knock,
+      }}
+    >
+      <KnockI18nProvider i18n={i18n}>{children}</KnockI18nProvider>
+    </ProviderStateContext.Provider>
+  );
+};
+
+export const useKnockClient = (): Knock => {
+  const context = React.useContext(ProviderStateContext) as KnockProviderState;
+  if (context === undefined) {
+    throw new Error("useKnock must be used within a KnockProvider");
+  }
+  return context.knock;
+};

package/src/modules/core/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockProvider";

package/src/modules/core/hooks/index.ts

@@ -0,0 +1 @@
+export { default as useAuthenticatedKnockClient } from "./useAuthenticatedKnockClient";

package/src/modules/core/hooks/useAuthenticatedKnockClient.ts

@@ -0,0 +1,23 @@
+import React, { useMemo } from "react";
+import Knock, { KnockOptions } from "@knocklabs/client";
+
+function useAuthenticatedKnockClient(
+  apiKey: string,
+  userId: string,
+  userToken: string | undefined,
+  options: KnockOptions = {},
+) {
+  const knockRef = React.useRef<Knock | null>();
+
+  return useMemo(() => {
+    if (knockRef.current) knockRef.current.teardown();
+
+    const knock = new Knock(apiKey, options);
+    knock.authenticate(userId, userToken);
+    knockRef.current = knock;
+
+    return knock;
+  }, [apiKey, userId, userToken]);
+}
+
+export default useAuthenticatedKnockClient;

package/src/modules/core/index.ts

@@ -0,0 +1,4 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./constants";
+export * from "./utils";

package/src/modules/core/utils.ts

@@ -0,0 +1,55 @@
+import { FeedClientOptions } from "@knocklabs/client";
+import { parseISO, formatDistance, Locale } from "date-fns";
+import { ReactNode } from "react";
+
+export function formatBadgeCount(count: number): string | number {
+  return count > 9 ? "9+" : count;
+}
+
+type FormatTimestampOptions = {
+  locale?: Locale;
+};
+
+export function formatTimestamp(
+  ts: string,
+  options: FormatTimestampOptions = {},
+) {
+  try {
+    const parsedTs = parseISO(ts);
+    const formatted = formatDistance(parsedTs, new Date(), {
+      addSuffix: true,
+      locale: options.locale,
+    });
+
+    return formatted;
+  } catch (e) {
+    return ts;
+  }
+}
+
+export function toSentenceCase(string: string): string {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+}
+
+export function renderNodeOrFallback(node: ReactNode, fallback: ReactNode) {
+  return node !== undefined ? node : fallback;
+}
+
+/*
+  Used to build a consistent key for the KnockFeedProvider so that React knows when
+  to trigger a re-render of the context when a key property changes.
+*/
+export function feedProviderKey(
+  userFeedId: string,
+  options: FeedClientOptions = {},
+) {
+  return [
+    userFeedId,
+    options.source,
+    options.tenant,
+    options.has_tenant,
+    options.archived,
+  ]
+    .filter((f) => f !== null && f !== undefined)
+    .join("-");
+}

package/src/modules/feed/context/KnockFeedContainer.tsx

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from "react";
+import "./styles.css";
+
+export const KnockFeedContainer: React.FC<PropsWithChildren> = ({
+  children,
+}) => {
+  return <div className="rnf-feed-provider">{children}</div>;
+};

package/src/modules/feed/context/KnockFeedProvider.tsx

@@ -0,0 +1,78 @@
+import * as React from "react";
+import Knock, {
+  Feed,
+  FeedClientOptions,
+  FeedStoreState,
+} from "@knocklabs/client";
+import create, { StoreApi, UseStore } from "zustand";
+
+import { ColorMode } from "../../core/constants";
+import useNotifications from "../hooks/useNotifications";
+import { feedProviderKey } from "../../core/utils";
+import { KnockFeedContainer } from "./KnockFeedContainer";
+import { useKnockClient } from "../../core";
+
+export interface KnockFeedProviderState {
+  knock: Knock;
+  feedClient: Feed;
+  useFeedStore: UseStore<FeedStoreState>;
+  colorMode: ColorMode;
+}
+
+const FeedStateContext = React.createContext<KnockFeedProviderState | null>(
+  null,
+);
+
+export interface KnockFeedProviderProps {
+  // Feed props
+  feedId: string;
+
+  // Extra options
+  children?: React.ReactElement;
+  rootless?: boolean;
+  colorMode?: ColorMode;
+
+  // Feed client options
+  defaultFeedOptions?: FeedClientOptions;
+}
+
+export const KnockFeedProvider: React.FC<KnockFeedProviderProps> = ({
+  feedId,
+  children,
+  defaultFeedOptions = {},
+  rootless = false,
+  colorMode = "light",
+}) => {
+  const knock = useKnockClient();
+
+  const feedClient = useNotifications(knock, feedId, defaultFeedOptions);
+  const useFeedStore = create(feedClient.store as StoreApi<FeedStoreState>);
+
+  const content = rootless ? (
+    children
+  ) : (
+    <KnockFeedContainer>{children}</KnockFeedContainer>
+  );
+
+  return (
+    <FeedStateContext.Provider
+      key={feedProviderKey(feedId, defaultFeedOptions)}
+      value={{
+        knock,
+        feedClient,
+        useFeedStore,
+        colorMode,
+      }}
+    >
+      {content}
+    </FeedStateContext.Provider>
+  );
+};
+
+export const useKnockFeed = (): KnockFeedProviderState => {
+  const context = React.useContext(FeedStateContext);
+  if (context === undefined) {
+    throw new Error("useKnockFeed must be used within a KnockFeedProvider");
+  }
+  return context as KnockFeedProviderState;
+};

package/src/modules/feed/context/index.ts

@@ -0,0 +1,2 @@
+export * from "./KnockFeedProvider";
+export * from "./KnockFeedContainer";

package/src/modules/feed/context/styles.css

@@ -0,0 +1,10 @@
+.rnf-feed-provider {
+  font-family: var(--rnf-font-family-sanserif) !important;
+  margin: 0 !important;
+  padding: 0 !important;
+}
+
+.rnf-feed-provider * {
+  font-family: var(--rnf-font-family-sanserif) !important;
+  box-sizing: border-box;
+}

package/src/modules/feed/hooks/index.ts

@@ -0,0 +1,2 @@
+export { default as useNotifications } from "./useNotifications";
+export { default as useFeedSettings } from "./useFeedSettings";

package/src/modules/feed/hooks/useFeedSettings.ts

@@ -0,0 +1,44 @@
+import { Feed } from "@knocklabs/client";
+import { useEffect, useState } from "react";
+
+export type FeedSettings = {
+  features: {
+    branding_required: boolean;
+  };
+};
+
+function useFeedSettings(feedClient: Feed): {
+  settings: FeedSettings | null;
+  loading: boolean;
+} {
+  const [settings, setSettings] = useState(null);
+  const [isLoading, setIsLoading] = useState(false);
+
+  // TODO: consider moving this into the feed client and into the feed store state when
+  // we're using this in other areas of the feed
+  useEffect(() => {
+    async function getSettings() {
+      const knock = feedClient.knock;
+      const apiClient = knock.client();
+      const feedSettingsPath = `/v1/users/${knock.userId}/feeds/${feedClient.feedId}/settings`;
+      setIsLoading(true);
+
+      const response = await apiClient.makeRequest({
+        method: "GET",
+        url: feedSettingsPath,
+      });
+
+      if (!response.error) {
+        setSettings(response.body);
+      }
+
+      setIsLoading(false);
+    }
+
+    getSettings();
+  }, []);
+
+  return { settings, loading: isLoading };
+}
+
+export default useFeedSettings;

package/src/modules/feed/hooks/useNotifications.ts

@@ -0,0 +1,30 @@
+import Knock, { Feed, FeedClientOptions } from "@knocklabs/client";
+import { useMemo, useRef } from "react";
+
+function useNotifications(
+  knock: Knock,
+  feedId: string,
+  options: FeedClientOptions = {},
+) {
+  const feedClientRef = useRef<Feed | null>();
+
+  return useMemo(() => {
+    if (feedClientRef.current) feedClientRef.current.teardown();
+
+    const feedClient = knock.feeds.initialize(feedId, options);
+
+    feedClient.listenForUpdates();
+    feedClientRef.current = feedClient;
+
+    return feedClient;
+  }, [
+    knock,
+    feedId,
+    options.source,
+    options.tenant,
+    options.has_tenant,
+    options.archived,
+  ]);
+}
+
+export default useNotifications;

package/src/modules/feed/index.ts

@@ -0,0 +1,2 @@
+export * from "./context";
+export * from "./hooks";

package/src/modules/i18n/context/KnockI18nProvider.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import { locales, I18nContent } from "../languages";
+
+export const I18nContext = React.createContext<I18nContent>(locales.en);
+
+interface KnockI18nProviderProps {
+  i18n?: I18nContent;
+  children: JSX.Element | undefined;
+}
+
+export function KnockI18nProvider({
+  i18n = locales.en,
+  ...props
+}: KnockI18nProviderProps) {
+  return <I18nContext.Provider {...props} value={i18n} />;
+}

package/src/modules/i18n/context/index.ts

@@ -0,0 +1 @@
+export * from "./KnockI18nProvider";

package/src/modules/i18n/hooks/index.ts

@@ -0,0 +1 @@
+export * from "./useTranslations";

package/src/modules/i18n/hooks/useTranslations.ts

@@ -0,0 +1,22 @@
+import { useContext } from "react";
+import { Locale as DateFnLocale } from "date-fns";
+import * as dateFnsLocales from "date-fns/locale";
+import { I18nContent, locales } from "../languages";
+import { I18nContext } from "../context/KnockI18nProvider";
+
+export function useTranslations() {
+  const { translations, locale } = useContext<I18nContent>(I18nContext);
+
+  return {
+    locale,
+    t: (key: keyof typeof translations) => {
+      // We always use english as the default translation when a key doesn't exist
+      return translations[key] || locales.en.translations[key];
+    },
+    dateFnsLocale: (): DateFnLocale => {
+      return locale in dateFnsLocales
+        ? dateFnsLocales[locale as keyof typeof dateFnsLocales]
+        : dateFnsLocales.enUS;
+    },
+  };
+}

package/src/modules/i18n/index.ts

@@ -0,0 +1,3 @@
+export * from "./context";
+export * from "./hooks";
+export * from "./languages";

package/src/modules/i18n/languages/de.ts

@@ -0,0 +1,19 @@
+import { I18nContent } from ".";
+
+const de: I18nContent = {
+  translations: {
+    archiveNotification: "Benachrichtigung archivieren",
+    markAllAsRead: "Alle als gelesen markieren",
+    notifications: "Benachrichtigungen",
+    emptyFeedTitle: "Noch keine Benachrichtigungen",
+    emptyFeedBody:
+      "Wir werden dich benachrichtigen, sobald wir etwas Neues für dich haben.",
+    all: "Alle",
+    unread: "Ungelesen",
+    read: "Gelesen",
+    unseen: "Ungesehen",
+  },
+  locale: "de",
+};
+
+export default de;

package/src/modules/i18n/languages/en.ts

@@ -0,0 +1,18 @@
+import { I18nContent } from ".";
+
+const en: I18nContent = {
+  translations: {
+    archiveNotification: "Archive this notification",
+    markAllAsRead: "Mark all as read",
+    notifications: "Notifications",
+    emptyFeedTitle: "No notifications yet",
+    emptyFeedBody: "We'll let you know when we've got something new for you.",
+    all: "All",
+    unread: "Unread",
+    read: "Read",
+    unseen: "Unseen",
+  },
+  locale: "en",
+};
+
+export default en;

package/src/modules/i18n/languages/index.ts

@@ -0,0 +1,22 @@
+import en from "./en";
+import de from "./de";
+
+export interface Translations {
+  readonly emptyFeedTitle: string;
+  readonly emptyFeedBody: string;
+  readonly notifications: string;
+  readonly poweredBy: string;
+  readonly markAllAsRead: string;
+  readonly archiveNotification: string;
+  readonly all: string;
+  readonly unread: string;
+  readonly read: string;
+  readonly unseen: string;
+}
+
+export interface I18nContent {
+  readonly translations: Partial<Translations>;
+  readonly locale: string;
+}
+
+export const locales = { en, de };

package/tsconfig.json

@@ -0,0 +1,4 @@
+{
+  "extends": "@knocklabs/typescript-config/react-library.json",
+  "include": ["src"]
+}