Extract notifications into new package

apps/app/.env.example

@@ -30,5 +30,3 @@ NEXT_PUBLIC_POSTHOG_HOST=""
 NEXT_PUBLIC_APP_URL="http://localhost:3000"
 NEXT_PUBLIC_WEB_URL="http://localhost:3001"
 NEXT_PUBLIC_DOCS_URL="http://localhost:3004"
-NEXT_PUBLIC_KNOCK_FEED_CHANNEL_ID=""
-NEXT_PUBLIC_KNOCK_API_KEY=""

packages/design-system/package.json

@@ -8,8 +8,6 @@
   },
   "dependencies": {
     "@hookform/resolvers": "^3.9.1",
-    "@knocklabs/node": "^0.6.13",
-    "@knocklabs/react": "^0.2.29",
     "@radix-ui/react-accordion": "^1.2.2",
     "@radix-ui/react-alert-dialog": "^1.1.4",
     "@radix-ui/react-aspect-ratio": "^1.1.1",

packages/notifications/components/feed.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import {
+  NotificationFeedPopover,
+  NotificationIconButton,
+} from '@knocklabs/react';
+import { useRef, useState } from 'react';
+
+// Required CSS import, unless you're overriding the styling
+import '@knocklabs/react/dist/index.css';
+
+export const KnockNotificationFeed = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const notifButtonRef = useRef(null);
+
+  return (
+    <>
+      <NotificationIconButton
+        ref={notifButtonRef}
+        onClick={() => setIsVisible(!isVisible)}
+      />
+      <NotificationFeedPopover
+        buttonRef={notifButtonRef}
+        isVisible={isVisible}
+        onClose={() => setIsVisible(false)}
+      />
+    </>
+  );
+};

packages/notifications/index.ts

@@ -0,0 +1,6 @@
+import { Knock } from '@knocklabs/node';
+import { keys } from './keys';
+
+const key = keys().KNOCK_SECRET_API_KEY;
+
+export const notifications = new Knock(key);

packages/notifications/keys.ts

@@ -0,0 +1,16 @@
+import { createEnv } from '@t3-oss/env-nextjs';
+import { z } from 'zod';
+
+export const keys = () =>
+  createEnv({
+    server: {
+      KNOCK_API_KEY: z.string().min(1).optional(),
+      KNOCK_FEED_CHANNEL_ID: z.string().min(1).optional(),
+      KNOCK_SECRET_API_KEY: z.string().min(1).optional(),
+    },
+    runtimeEnv: {
+      KNOCK_API_KEY: process.env.KNOCK_API_KEY,
+      KNOCK_FEED_CHANNEL_ID: process.env.KNOCK_FEED_CHANNEL_ID,
+      KNOCK_SECRET_API_KEY: process.env.KNOCK_SECRET_API_KEY,
+    },
+  });

packages/notifications/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@repo/notifications",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "clean": "git clean -xdf .cache .turbo dist node_modules",
+    "typecheck": "tsc --noEmit --emitDeclarationOnly false"
+  },
+  "dependencies": {
+    "@knocklabs/node": "^0.6.13",
+    "@knocklabs/react": "^0.2.29",
+    "@t3-oss/env-nextjs": "^0.11.1",
+    "react": "^19.0.0",
+    "zod": "^3.24.1"
+  },
+  "devDependencies": {
+    "@repo/typescript-config": "workspace:*",
+    "typescript": "^5.7.2",
+    "@types/node": "22.10.5",
+    "@types/react": "19.0.2",
+    "@types/react-dom": "^19.0.2"
+  }
+}

packages/notifications/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@repo/typescript-config/nextjs.json",
+  "compilerOptions": {
+    "baseUrl": "."
+  },
+  "include": ["**/*.ts", "**/*.tsx"],
+  "exclude": ["node_modules"]
+}