[LG-5644] feat(chat-layout): initial release of ChatLayout component

.changeset/chat-layout.md

@@ -0,0 +1,5 @@
+---
+'@lg-chat/chat-layout': minor
+---
+
+Initial release of `ChatLayout`

README.md

@@ -149,6 +149,7 @@ import Button from '@leafygreen-ui/button';
 | [@lg-charts/legend](./charts/legend)                                 | [![version](https://img.shields.io/npm/v/@lg-charts/legend)](https://www.npmjs.com/package/@lg-charts/legend)                                   | ![downloads](https://img.shields.io/npm/dm/@lg-charts/legend?color=white)                  | [Live Example](http://mongodb.design/component/legend/live-example)                   |
 | [@lg-charts/series-provider](./charts/series-provider)               | [![version](https://img.shields.io/npm/v/@lg-charts/series-provider)](https://www.npmjs.com/package/@lg-charts/series-provider)                 | ![downloads](https://img.shields.io/npm/dm/@lg-charts/series-provider?color=white)         | [Live Example](http://mongodb.design/component/series-provider/live-example)          |
 | [@lg-chat/avatar](./chat/avatar)                                     | [![version](https://img.shields.io/npm/v/@lg-chat/avatar)](https://www.npmjs.com/package/@lg-chat/avatar)                                       | ![downloads](https://img.shields.io/npm/dm/@lg-chat/avatar?color=white)                    | [Live Example](http://mongodb.design/component/avatar/live-example)                   |
+| [@lg-chat/chat-layout](./chat/chat-layout)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-layout)](https://www.npmjs.com/package/@lg-chat/chat-layout)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-layout?color=white)               | [Live Example](http://mongodb.design/component/chat-layout/live-example)              |
 | [@lg-chat/chat-window](./chat/chat-window)                           | [![version](https://img.shields.io/npm/v/@lg-chat/chat-window)](https://www.npmjs.com/package/@lg-chat/chat-window)                             | ![downloads](https://img.shields.io/npm/dm/@lg-chat/chat-window?color=white)               | [Live Example](http://mongodb.design/component/chat-window/live-example)              |
 | [@lg-chat/fixed-chat-window](./chat/fixed-chat-window)               | [![version](https://img.shields.io/npm/v/@lg-chat/fixed-chat-window)](https://www.npmjs.com/package/@lg-chat/fixed-chat-window)                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/fixed-chat-window?color=white)         | [Live Example](http://mongodb.design/component/fixed-chat-window/live-example)        |
 | [@lg-chat/input-bar](./chat/input-bar)                               | [![version](https://img.shields.io/npm/v/@lg-chat/input-bar)](https://www.npmjs.com/package/@lg-chat/input-bar)                                 | ![downloads](https://img.shields.io/npm/dm/@lg-chat/input-bar?color=white)                 | [Live Example](http://mongodb.design/component/input-bar/live-example)                |

chat/chat-layout/README.md

@@ -0,0 +1,90 @@
+# Chat Layout
+
+![npm (scoped)](https://img.shields.io/npm/v/@lg-chat/chat-layout.svg)
+
+#### [View on MongoDB.design](https://www.mongodb.design/component/chat-layout/live-example/)
+
+## Installation
+
+### PNPM
+
+```shell
+pnpm add @lg-chat/chat-layout
+```
+
+### Yarn
+
+```shell
+yarn add @lg-chat/chat-layout
+```
+
+### NPM
+
+```shell
+npm install @lg-chat/chat-layout
+```
+
+## Overview
+
+`@lg-chat/chat-layout` provides a CSS Grid-based layout system for building full-screen chat interfaces with a collapsible side nav.
+
+## Examples
+
+```tsx
+import { ChatLayout } from '@lg-chat/chat-layout';
+
+function MyChatApp() {
+  const handleToggle = (isPinned: boolean) => {
+    console.log('Side nav is now:', isPinned ? 'pinned' : 'collapsed');
+  };
+
+  return (
+    <ChatLayout initialIsPinned={true} onTogglePinned={handleToggle}>
+      {/* ChatSideNav and ChatMain components will go here */}
+    </ChatLayout>
+  );
+}
+```
+
+## Properties
+
+### ChatLayout
+
+| Prop                           | Type                          | Description                                                                                   | Default |
+| ------------------------------ | ----------------------------- | --------------------------------------------------------------------------------------------- | ------- |
+| `children`                     | `ReactNode`                   | The content to render inside the grid layout (`ChatSideNav` and `ChatMain` components)        | -       |
+| `className` _(optional)_       | `string`                      | Custom CSS class to apply to the grid container                                               | -       |
+| `initialIsPinned` _(optional)_ | `boolean`                     | Initial state for whether the side nav is pinned (expanded)                                   | `true`  |
+| `onTogglePinned` _(optional)_  | `(isPinned: boolean) => void` | Callback fired when the side nav is toggled. Receives the new `isPinned` state as an argument | -       |
+
+All other props are passed through to the underlying `<div>` element.
+
+## Context API
+
+### useChatLayoutContext
+
+Hook that returns the current chat layout context:
+
+```tsx
+const { isPinned, togglePin } = useChatLayoutContext();
+```
+
+**Returns:**
+
+| Property    | Type         | Description                              |
+| ----------- | ------------ | ---------------------------------------- |
+| `isPinned`  | `boolean`    | Whether the side nav is currently pinned |
+| `togglePin` | `() => void` | Function to toggle the pinned state      |
+
+## Behavior
+
+### State Management
+
+- `ChatLayout` manages the `isPinned` state internally and provides it to all descendants via `ChatLayoutContext`
+- When `togglePin` is called:
+  1. The `isPinned` state updates
+  2. Grid columns resize smoothly via CSS transition
+  3. The `onTogglePinned` callback fires (if provided) with the new state value
+- Descendant components can consume the context to:
+  - Read the current `isPinned` state
+  - Call `togglePin()` to toggle the sidebar

chat/chat-layout/package.json

@@ -0,0 +1,44 @@
+
+{
+  "name": "@lg-chat/chat-layout",
+  "version": "0.0.1",
+  "description": "LeafyGreen UI Kit Chat Layout",
+  "main": "./dist/umd/index.js",
+  "module": "./dist/esm/index.js",
+  "types": "./dist/types/index.d.ts",
+  "license": "Apache-2.0",
+  "exports": {
+    ".": {
+      "require": "./dist/umd/index.js",
+      "import": "./dist/esm/index.js",
+      "types": "./dist/types/index.d.ts"
+    },
+    "./testing": {
+      "require": "./dist/umd/testing/index.js",
+      "import": "./dist/esm/testing/index.js",
+      "types": "./dist/types/testing/index.d.ts"
+    }
+  },
+  "scripts": {
+    "build": "lg-build bundle",
+    "tsc": "lg-build tsc",
+    "docs": "lg-build docs"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "dependencies": {
+    "@leafygreen-ui/emotion": "workspace:^",
+    "@leafygreen-ui/lib": "workspace:^",
+    "@leafygreen-ui/tokens": "workspace:^",
+    "@lg-tools/test-harnesses": "workspace:^"
+  },
+  "homepage": "https://github.com/mongodb/leafygreen-ui/tree/main/chat/chat-layout",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/mongodb/leafygreen-ui"
+  },
+  "bugs": {
+    "url": "https://jira.mongodb.org/projects/LG/summary"
+  }
+}

chat/chat-layout/src/ChatLayout.stories.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { StoryMetaType } from '@lg-tools/storybook-utils';
+import { StoryFn, StoryObj } from '@storybook/react';
+
+import { ChatLayout, type ChatLayoutProps } from '.';
+
+const meta: StoryMetaType<typeof ChatLayout> = {
+  title: 'Composition/Chat/ChatLayout',
+  component: ChatLayout,
+  parameters: {
+    default: 'LiveExample',
+  },
+};
+export default meta;
+
+const Template: StoryFn<ChatLayoutProps> = props => <ChatLayout {...props} />;
+
+export const LiveExample: StoryObj<ChatLayoutProps> = {
+  render: Template,
+  parameters: {
+    chromatic: {
+      disableSnapshot: true,
+    },
+  },
+};

chat/chat-layout/src/ChatLayout/ChatLayout.spec.tsx

@@ -0,0 +1,139 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ChatLayout, useChatLayoutContext } from '.';
+
+describe('packages/chat-layout', () => {
+  describe('ChatLayout', () => {
+    test('renders children', () => {
+      render(
+        <ChatLayout>
+          <div>Test Content</div>
+        </ChatLayout>,
+      );
+      expect(screen.getByText('Test Content')).toBeInTheDocument();
+    });
+
+    test('provides isPinned context with default value', () => {
+      const TestConsumer = () => {
+        const { isPinned } = useChatLayoutContext();
+        return <div>isPinned: {isPinned.toString()}</div>;
+      };
+
+      render(
+        <ChatLayout>
+          <TestConsumer />
+        </ChatLayout>,
+      );
+      expect(screen.getByText('isPinned: true')).toBeInTheDocument();
+    });
+
+    test('accepts initialIsPinned prop', () => {
+      const TestConsumer = () => {
+        const { isPinned } = useChatLayoutContext();
+        return <div>isPinned: {isPinned.toString()}</div>;
+      };
+
+      render(
+        <ChatLayout initialIsPinned={false}>
+          <TestConsumer />
+        </ChatLayout>,
+      );
+      expect(screen.getByText('isPinned: false')).toBeInTheDocument();
+    });
+
+    test('togglePin function updates isPinned state', async () => {
+      const TestConsumer = () => {
+        const { isPinned, togglePin } = useChatLayoutContext();
+        return (
+          <>
+            <div>isPinned: {isPinned.toString()}</div>
+            <button onClick={togglePin}>Toggle</button>
+          </>
+        );
+      };
+
+      render(
+        <ChatLayout>
+          <TestConsumer />
+        </ChatLayout>,
+      );
+
+      expect(screen.getByText('isPinned: true')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button', { name: 'Toggle' }));
+
+      expect(screen.getByText('isPinned: false')).toBeInTheDocument();
+
+      await userEvent.click(screen.getByRole('button', { name: 'Toggle' }));
+
+      expect(screen.getByText('isPinned: true')).toBeInTheDocument();
+    });
+
+    test('forwards HTML attributes to the div wrapper', () => {
+      render(
+        <ChatLayout data-testid="chat-layout">
+          <div>Content</div>
+        </ChatLayout>,
+      );
+      expect(screen.getByTestId('chat-layout')).toBeInTheDocument();
+    });
+
+    test('calls onTogglePinned callback when togglePin is called', async () => {
+      const onTogglePinned = jest.fn();
+
+      const TestConsumer = () => {
+        const { togglePin } = useChatLayoutContext();
+        return <button onClick={togglePin}>Toggle</button>;
+      };
+
+      render(
+        <ChatLayout onTogglePinned={onTogglePinned}>
+          <TestConsumer />
+        </ChatLayout>,
+      );
+
+      const toggleButton = screen.getByRole('button', { name: 'Toggle' });
+
+      await userEvent.click(toggleButton);
+
+      expect(onTogglePinned).toHaveBeenCalledTimes(1);
+      expect(onTogglePinned).toHaveBeenCalledWith(false);
+
+      await userEvent.click(toggleButton);
+
+      expect(onTogglePinned).toHaveBeenCalledTimes(2);
+      expect(onTogglePinned).toHaveBeenCalledWith(true);
+    });
+
+    test('onTogglePinned receives correct isPinned value based on initialIsPinned', async () => {
+      const onTogglePinned = jest.fn();
+
+      const TestConsumer = () => {
+        const { togglePin } = useChatLayoutContext();
+        return <button onClick={togglePin}>Toggle</button>;
+      };
+
+      render(
+        <ChatLayout initialIsPinned={false} onTogglePinned={onTogglePinned}>
+          <TestConsumer />
+        </ChatLayout>,
+      );
+
+      await userEvent.click(screen.getByRole('button', { name: 'Toggle' }));
+
+      expect(onTogglePinned).toHaveBeenCalledWith(true);
+    });
+
+    test('applies custom className', () => {
+      render(
+        <ChatLayout data-testid="chat-layout" className="custom-class">
+          <div>Content</div>
+        </ChatLayout>,
+      );
+      const element = screen.getByTestId('chat-layout');
+      expect(element).toHaveClass('custom-class');
+    });
+  });
+});

chat/chat-layout/src/ChatLayout/ChatLayout.styles.ts

@@ -0,0 +1,27 @@
+import { css, cx } from '@leafygreen-ui/emotion';
+import { transitionDuration } from '@leafygreen-ui/tokens';
+
+import {
+  gridAreas,
+  SIDE_NAV_WIDTH_COLLAPSED,
+  SIDE_NAV_WIDTH_PINNED,
+} from '../constants';
+
+const getBaseContainerStyles = (isPinned: boolean) => css`
+  display: grid;
+  grid-template-areas: '${gridAreas.sideNav} ${gridAreas.main}';
+  grid-template-columns: ${isPinned
+      ? `${SIDE_NAV_WIDTH_PINNED}px`
+      : `${SIDE_NAV_WIDTH_COLLAPSED}px`} 1fr;
+  height: 100%;
+  width: 100%;
+  transition: grid-template-columns ${transitionDuration.default}ms ease-in-out;
+`;
+
+export const getContainerStyles = ({
+  className,
+  isPinned,
+}: {
+  className?: string;
+  isPinned: boolean;
+}) => cx(getBaseContainerStyles(isPinned), className);

chat/chat-layout/src/ChatLayout/ChatLayout.tsx

@@ -0,0 +1,37 @@
+import React, { useCallback, useState } from 'react';
+
+import { getContainerStyles } from './ChatLayout.styles';
+import { ChatLayoutProps } from './ChatLayout.types';
+import { ChatLayoutContext } from './ChatLayoutContext';
+
+/**
+ * ChatLayout is a context provider that manages the pinned state of the side nav
+ * and provides it to all child components.
+ *
+ * Context is primarily used by ChatSideNav and ChatMain.
+ */
+export function ChatLayout({
+  children,
+  className,
+  initialIsPinned = true,
+  onTogglePinned,
+  ...rest
+}: ChatLayoutProps) {
+  const [isPinned, setIsPinned] = useState(initialIsPinned);
+
+  const togglePin = useCallback(() => {
+    const newValue = !isPinned;
+    setIsPinned(newValue);
+    onTogglePinned?.(newValue);
+  }, [isPinned, onTogglePinned]);
+
+  return (
+    <ChatLayoutContext.Provider value={{ isPinned, togglePin }}>
+      <div className={getContainerStyles({ className, isPinned })} {...rest}>
+        {children}
+      </div>
+    </ChatLayoutContext.Provider>
+  );
+}
+
+ChatLayout.displayName = 'ChatLayout';