@linktr.ee/messaging-react 1.33.1 → 1.33.2-rc-1777444067

package/src/providers/MessagingProvider.stories.tsx

@@ -0,0 +1,214 @@
+import type { Meta, StoryFn } from '@storybook/react'
+import React, { useEffect, useState } from 'react'
+import { StreamChat } from 'stream-chat'
+
+import { MessagingProvider, useMessagingContext } from './MessagingProvider'
+
+/**
+ * Storybook coverage for guest-mode connections through MessagingProvider.
+ *
+ * The real Stream Chat backend is not reachable from Storybook, so we stub the
+ * pieces of `StreamChat.prototype` that `StreamChatService` exercises during
+ * `connectUser`/`disconnectUser`. This keeps the story focused on the new API
+ * surface (`user.type === 'guest'` + `fetchToken: undefined`) rather than on
+ * setting up a fake transport layer.
+ */
+const useStubbedStreamChat = () => {
+  useEffect(() => {
+    const proto = StreamChat.prototype as unknown as Record<string, unknown>
+    const original = {
+      connectUser: proto.connectUser,
+      setGuestUser: proto.setGuestUser,
+      disconnectUser: proto.disconnectUser,
+      on: proto.on,
+      off: proto.off,
+    }
+
+    proto.connectUser = function connectUser(this: StreamChat) {
+      this.userID = 'default-stub'
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(this as any).user = { id: 'default-stub', name: 'User' }
+      return Promise.resolve({ me: this.user }) as ReturnType<
+        typeof StreamChat.prototype.connectUser
+      >
+    } as typeof StreamChat.prototype.connectUser
+
+    proto.setGuestUser = function setGuestUser(
+      this: StreamChat,
+      user: { id: string; name?: string }
+    ) {
+      this.userID = user.id
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(this as any).user = user
+      return Promise.resolve()
+    } as typeof StreamChat.prototype.setGuestUser
+
+    proto.disconnectUser = function disconnectUser(this: StreamChat) {
+      this.userID = undefined
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      ;(this as any).user = undefined
+      return Promise.resolve()
+    } as typeof StreamChat.prototype.disconnectUser
+
+    return () => {
+      Object.assign(proto, original)
+    }
+  }, [])
+}
+
+const ConnectionStatus: React.FC = () => {
+  const { client, isConnected, isLoading, error } = useMessagingContext()
+  return (
+    <div className="flex flex-col gap-1 rounded border border-gray-300 bg-white p-4 text-sm">
+      <div>
+        <strong>isLoading:</strong> {String(isLoading)}
+      </div>
+      <div>
+        <strong>isConnected:</strong> {String(isConnected)}
+      </div>
+      <div>
+        <strong>userID:</strong> {client?.userID ?? 'none'}
+      </div>
+      <div>
+        <strong>error:</strong> {error ?? 'none'}
+      </div>
+    </div>
+  )
+}
+
+type StoryArgs = {
+  mode: 'guest' | 'default'
+}
+
+const meta: Meta<StoryArgs> = {
+  title: 'Providers/MessagingProvider',
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    mode: {
+      control: { type: 'inline-radio' },
+      options: ['guest', 'default'],
+    },
+  },
+}
+export default meta
+
+const Template: StoryFn<StoryArgs> = ({ mode }) => {
+  useStubbedStreamChat()
+
+  // Force a remount when `mode` changes so MessagingProvider tears down its
+  // existing connection — the documented way to swap between default and
+  // guest identities.
+  const [providerKey, setProviderKey] = useState(0)
+  useEffect(() => {
+    setProviderKey((k) => k + 1)
+  }, [mode])
+
+  const user =
+    mode === 'guest'
+      ? { type: 'guest' as const, id: 'guest-demo', name: 'Guest' }
+      : { id: 'user-demo', name: 'Authed User' }
+
+  // For guest mode `fetchToken` is intentionally omitted to demonstrate that
+  // `StreamChatServiceConfig.fetchToken` is no longer required.
+  const serviceConfig =
+    mode === 'guest'
+      ? {
+          createChannel: async () => ({ channelId: 'noop' }),
+        }
+      : {
+          fetchToken: async () => 'mock-token',
+          createChannel: async () => ({ channelId: 'noop' }),
+        }
+
+  return (
+    <MessagingProvider
+      key={`${mode}-${providerKey}`}
+      apiKey="mock-api-key"
+      user={user}
+      serviceConfig={serviceConfig}
+    >
+      <ConnectionStatus />
+    </MessagingProvider>
+  )
+}
+
+export const GuestMode = Template.bind({})
+GuestMode.args = { mode: 'guest' }
+GuestMode.parameters = {
+  docs: {
+    description: {
+      story:
+        'Connects through `MessagingProvider` with `user={{ type: "guest", ... }}` and a service config that omits `fetchToken`. The toolkit dispatches to `StreamChat.setGuestUser` internally; no token request is made.',
+    },
+  },
+}
+
+export const DefaultMode = Template.bind({})
+DefaultMode.args = { mode: 'default' }
+DefaultMode.parameters = {
+  docs: {
+    description: {
+      story:
+        'Existing behavior: `user` without a `type` connects via `client.connectUser` using the configured `fetchToken` provider.',
+    },
+  },
+}
+
+export const ModeSwap: StoryFn<StoryArgs> = () => {
+  useStubbedStreamChat()
+  const [mode, setMode] = useState<'guest' | 'default'>('guest')
+
+  const user =
+    mode === 'guest'
+      ? { type: 'guest' as const, id: 'guest-demo', name: 'Guest' }
+      : { id: 'user-demo', name: 'Authed User' }
+
+  const serviceConfig =
+    mode === 'guest'
+      ? {
+          createChannel: async () => ({ channelId: 'noop' }),
+        }
+      : {
+          fetchToken: async () => 'mock-token',
+          createChannel: async () => ({ channelId: 'noop' }),
+        }
+
+  return (
+    <div className="flex flex-col gap-3">
+      <div className="flex gap-2">
+        <button
+          type="button"
+          className="rounded bg-gray-200 px-3 py-1"
+          onClick={() => setMode('guest')}
+        >
+          Guest
+        </button>
+        <button
+          type="button"
+          className="rounded bg-gray-200 px-3 py-1"
+          onClick={() => setMode('default')}
+        >
+          Default
+        </button>
+      </div>
+      <MessagingProvider
+        key={mode}
+        apiKey="mock-api-key"
+        user={user}
+        serviceConfig={serviceConfig}
+      >
+        <ConnectionStatus />
+      </MessagingProvider>
+    </div>
+  )
+}
+ModeSwap.parameters = {
+  docs: {
+    description: {
+      story:
+        'Mode swapping is consumer-driven: change the `key` on `<MessagingProvider>` so React unmounts the previous instance (which calls `disconnectUser`) and mounts a fresh one with the new identity.',
+    },
+  },
+}

package/src/providers/MessagingProvider.test.tsx

@@ -0,0 +1,126 @@
+import { StreamChatService } from '@linktr.ee/messaging-core'
+import { render, waitFor, act } from '@testing-library/react'
+import React from 'react'
+import type { StreamChat } from 'stream-chat'
+import { describe, it, expect, vi, beforeEach } from 'vitest'
+
+import { MessagingProvider, useMessagingContext } from './MessagingProvider'
+
+// Stub stream-chat-react's <Chat /> so we don't need a real, fully-wired
+// StreamChat instance just to verify provider state.
+vi.mock('stream-chat-react', () => ({
+  Chat: ({ children }: { children: React.ReactNode }) => <>{children}</>,
+}))
+
+const setupServiceMock = () => {
+  const connectUser = vi.fn(
+    async () => ({ userID: 'mock' }) as unknown as StreamChat
+  )
+  const disconnectUser = vi.fn(async () => undefined)
+
+  vi.spyOn(StreamChatService.prototype, 'connectUser').mockImplementation(
+    connectUser
+  )
+  vi.spyOn(StreamChatService.prototype, 'disconnectUser').mockImplementation(
+    disconnectUser
+  )
+
+  return { connectUser, disconnectUser }
+}
+
+const Probe: React.FC<{ onState: (state: unknown) => void }> = ({
+  onState,
+}) => {
+  const ctx = useMessagingContext()
+  React.useEffect(() => {
+    onState({
+      isConnected: ctx.isConnected,
+      isLoading: ctx.isLoading,
+      error: ctx.error,
+      hasClient: !!ctx.client,
+    })
+  }, [ctx, onState])
+  return null
+}
+
+describe('MessagingProvider', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('connects a guest user through the underlying service', async () => {
+    const { connectUser } = setupServiceMock()
+    const states: unknown[] = []
+
+    render(
+      <MessagingProvider
+        apiKey="mock-api-key"
+        user={{ type: 'guest', id: 'guest-1', name: 'Guest' }}
+        serviceConfig={{
+          createChannel: async () => ({ channelId: 'ch-1' }),
+        }}
+      >
+        <Probe onState={(s) => states.push(s)} />
+      </MessagingProvider>
+    )
+
+    await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(1))
+    expect(connectUser).toHaveBeenCalledWith({
+      type: 'guest',
+      id: 'guest-1',
+      name: 'Guest',
+    })
+
+    await waitFor(() => {
+      const last = states[states.length - 1] as { isConnected: boolean }
+      expect(last.isConnected).toBe(true)
+    })
+  })
+
+  it('disconnects and reconnects when remounted with a new key', async () => {
+    const { connectUser, disconnectUser } = setupServiceMock()
+
+    const guestUser = {
+      type: 'guest' as const,
+      id: 'guest-1',
+      name: 'Guest',
+    }
+    const authedUser = { id: 'user-1', name: 'Authed User' }
+
+    const { rerender } = render(
+      <MessagingProvider
+        key="guest"
+        apiKey="mock-api-key"
+        user={guestUser}
+        serviceConfig={{
+          createChannel: async () => ({ channelId: 'ch-1' }),
+        }}
+      >
+        <div />
+      </MessagingProvider>
+    )
+
+    await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(1))
+    expect(connectUser).toHaveBeenLastCalledWith(guestUser)
+
+    await act(async () => {
+      rerender(
+        <MessagingProvider
+          key="authed"
+          apiKey="mock-api-key"
+          user={authedUser}
+          serviceConfig={{
+            fetchToken: async () => 'token',
+            createChannel: async () => ({ channelId: 'ch-1' }),
+          }}
+        >
+          <div />
+        </MessagingProvider>
+      )
+    })
+
+    await waitFor(() => expect(disconnectUser).toHaveBeenCalled())
+    await waitFor(() => expect(connectUser).toHaveBeenCalledTimes(2))
+    expect(connectUser).toHaveBeenLastCalledWith(authedUser)
+  })
+})

package/src/styles.css

@@ -64,6 +64,55 @@
   }
 }
 
+/* Full-screen media viewer dialog */
+.mes-media-viewer {
+  --transition-duration: 0.15s;
+
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  width: 100vw;
+  height: 100dvh;
+  max-width: 100vw;
+  max-height: 100dvh;
+  position: fixed;
+  inset: 0;
+
+  transition:
+    opacity var(--transition-duration) ease,
+    overlay var(--transition-duration) allow-discrete,
+    display var(--transition-duration) allow-discrete;
+
+  opacity: 0;
+}
+
+.mes-media-viewer[open] {
+  opacity: 1;
+}
+
+.mes-media-viewer::backdrop {
+  transition:
+    display var(--transition-duration) allow-discrete,
+    overlay var(--transition-duration) allow-discrete,
+    background-color var(--transition-duration) linear;
+  background-color: rgba(0, 0, 0, 0);
+}
+
+.mes-media-viewer[open]::backdrop {
+  background-color: rgba(0, 0, 0, 0.92);
+}
+
+@starting-style {
+  .mes-media-viewer[open] {
+    opacity: 0;
+
+    &::backdrop {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+}
+
 /* Textarea composer focus styles */
 .mes-textarea-composer-container:has(.mes-textarea-composer:focus) {
   outline: 2px solid black;
@@ -128,6 +177,10 @@
   color: #fff;
 }
 
+.str-chat__channel-list-react .str-chat__channel-list-messenger-react {
+  padding: 0;
+}
+
 /* Custom message tag styles */
 .message-tag {
   display: inline-flex;