Create spright-chat-conversation and spright-chat-message components

change/@ni-spright-components-6dcca5fc-0353-4ba2-b325-63565d42b95e.json

@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "Productize ChatConversation and ChatMessage elements",
+  "packageName": "@ni/spright-components",
+  "email": "jose.a.hernandez@ni.com",
+  "dependentChangeType": "patch"
+}

packages/spright-components/src/all-components.ts

@@ -6,4 +6,6 @@
 
 import '@ni/nimble-components/dist/esm/all-components';
 
+import './chat/conversation';
+import './chat/message';
 import './rectangle';

packages/spright-components/src/chat/conversation/index.ts

@@ -0,0 +1,25 @@
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-conversation': ChatConversation;
+    }
+}
+
+/**
+ * A Spright component for displaying a series of chat messages
+ */
+export class ChatConversation extends FoundationElement {}
+
+const sprightChatConversation = ChatConversation.compose({
+    baseName: 'chat-conversation',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate()
+    .withPrefix('spright')
+    .register(sprightChatConversation());
+export const chatConversationTag = 'spright-chat-conversation';

packages/spright-components/src/chat/conversation/styles.ts

@@ -0,0 +1,20 @@
+import { css } from '@microsoft/fast-element';
+import {
+    applicationBackgroundColor,
+    mediumPadding,
+    standardPadding
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('flex')}
+
+    :host {
+        flex-direction: column;
+        justify-content: flex-start;
+        row-gap: ${standardPadding};
+        padding: ${mediumPadding};
+        background: ${applicationBackgroundColor};
+        overflow-y: scroll;
+    }
+`;

packages/spright-components/src/chat/conversation/template.ts

@@ -0,0 +1,7 @@
+import { html } from '@microsoft/fast-element';
+import type { ChatConversation } from '.';
+
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html<ChatConversation>`<slot></slot>`;
+/* eslint-enable @typescript-eslint/indent */

packages/spright-components/src/chat/conversation/tests/chat-conversation.spec.ts

@@ -0,0 +1,34 @@
+import { html } from '@microsoft/fast-element';
+import { ChatConversation, chatConversationTag } from '..';
+import { fixture, type Fixture } from '../../../utilities/tests/fixture';
+
+async function setup(): Promise<Fixture<ChatConversation>> {
+    return await fixture<ChatConversation>(
+        html`<${chatConversationTag}></${chatConversationTag}>`
+    );
+}
+
+describe('ChatConversation', () => {
+    let element: ChatConversation;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        ({ element, connect, disconnect } = await setup());
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('can construct an element instance', () => {
+        expect(document.createElement(chatConversationTag)).toBeInstanceOf(
+            ChatConversation
+        );
+    });
+
+    it('should have a slot element in the shadow DOM', async () => {
+        await connect();
+        expect(element.shadowRoot?.querySelector('SLOT')).not.toBeNull();
+    });
+});

packages/spright-components/src/chat/message/index.ts

@@ -0,0 +1,34 @@
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
+import { styles } from './styles';
+import { template } from './template';
+import { ChatMessageType } from '../types';
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'spright-chat-message': ChatMessage;
+    }
+}
+
+/**
+ * A Spright component for displaying a chat message
+ */
+export class ChatMessage extends FoundationElement {
+    /**
+     * @public
+     * The message type of this message in the chat conversation
+     * @remarks
+     * HTML Attribute: message-type
+     */
+    @attr({ attribute: 'message-type' })
+    public readonly messageType: ChatMessageType = ChatMessageType.outbound;
+}
+
+const sprightChatMessage = ChatMessage.compose({
+    baseName: 'chat-message',
+    template,
+    styles
+});
+
+DesignSystem.getOrCreate().withPrefix('spright').register(sprightChatMessage());
+export const chatMessageTag = 'spright-chat-message';

packages/spright-components/src/chat/message/styles.ts

@@ -0,0 +1,50 @@
+import { css } from '@microsoft/fast-element';
+import {
+    bodyFont,
+    bodyFontColor,
+    borderHoverColor,
+    borderWidth,
+    fillSelectedColor,
+    mediumPadding
+} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { display } from '../../utilities/style/display';
+
+export const styles = css`
+    ${display('flex')}
+
+    :host {
+        min-width: 16px;
+        min-height: 16px;
+
+        flex-direction: row;
+        justify-content: center;
+        flex-shrink: 0;
+    }
+
+    :host([message-type='outbound']) {
+        justify-content: flex-end;
+    }
+
+    :host([message-type='inbound']) {
+        justify-content: flex-start;
+    }
+
+    div {
+        max-width: calc(100% - 200px);
+        width: fit-content;
+        height: fit-content;
+        padding: ${mediumPadding};
+        font: ${bodyFont};
+        color: ${bodyFontColor};
+    }
+
+    :host([message-type='outbound']) div {
+        background: ${fillSelectedColor};
+        border: ${borderWidth} solid ${borderHoverColor};
+        border-radius: 8px 8px 0px 8px;
+    }
+
+    :host([message-type='inbound']) div {
+        border-radius: 8px 8px 8px 0px;
+    }
+`;

packages/spright-components/src/chat/message/template.ts

@@ -0,0 +1,11 @@
+import { html } from '@microsoft/fast-element';
+import type { ChatMessage } from '.';
+
+/* eslint-disable @typescript-eslint/indent */
+// prettier-ignore
+export const template = html<ChatMessage>`
+    <div>
+        <slot></slot>
+    </div>
+`;
+/* eslint-enable @typescript-eslint/indent */

packages/spright-components/src/chat/message/tests/chat-message.spec.ts

@@ -0,0 +1,43 @@
+import { html } from '@microsoft/fast-element';
+import { ChatMessage, chatMessageTag } from '..';
+import { fixture, type Fixture } from '../../../utilities/tests/fixture';
+import { ChatMessageType } from '../../types';
+
+async function setup(): Promise<Fixture<ChatMessage>> {
+    return await fixture<ChatMessage>(
+        html`<${chatMessageTag}>Some message</${chatMessageTag}>`
+    );
+}
+
+describe('ChatMessage', () => {
+    let element: ChatMessage;
+    let connect: () => Promise<void>;
+    let disconnect: () => Promise<void>;
+
+    beforeEach(async () => {
+        ({ element, connect, disconnect } = await setup());
+    });
+
+    afterEach(async () => {
+        await disconnect();
+    });
+
+    it('can construct an element instance', () => {
+        expect(document.createElement(chatMessageTag)).toBeInstanceOf(
+            ChatMessage
+        );
+    });
+
+    it('should have a slot element in the shadow DOM', async () => {
+        await connect();
+        expect(element.shadowRoot?.querySelector('SLOT')).not.toBeNull();
+        expect(
+            element?.innerText?.includes('Some message', undefined)
+        ).toBeTrue();
+    });
+
+    it("should initialize 'message-type' to default", async () => {
+        await connect();
+        expect(element.messageType).toBe(ChatMessageType.outbound);
+    });
+});

packages/spright-components/src/chat/message/tests/types.spec.ts

@@ -0,0 +1,9 @@
+import type { ChatMessageType } from '../../types';
+
+describe('ChatMessage message type', () => {
+    it('ChatMessageType fails compile if assigning arbitrary string values', () => {
+        // @ts-expect-error This expect will fail if the enum-like type is missing "as const"
+        const messageType: ChatMessageType = 'hello';
+        expect(messageType).toEqual('hello');
+    });
+});

packages/spright-components/src/chat/types.ts

@@ -0,0 +1,12 @@
+/**
+ * A message type in a chat conversation.
+ * @public
+ */
+export const ChatMessageType = {
+    outbound: 'outbound',
+    inbound: 'inbound',
+    system: 'system'
+} as const;
+
+export type ChatMessageType =
+    (typeof ChatMessageType)[keyof typeof ChatMessageType];

packages/storybook/.storybook/main.js

@@ -61,7 +61,11 @@ export function webpackFinal(config) {
     ];
     return config;
 }
-export const staticDirs = ['public'];
+export const staticDirs = [
+    'public',
+    '../src/nimble',
+    '../src/spright'
+];
 export const framework = {
     name: '@storybook/html-webpack5'
 };

packages/storybook/src/docs/component-status.stories.ts

@@ -6,6 +6,7 @@ import { tableColumnMappingTag } from '../../../nimble-components/src/table-colu
 import { mappingIconTag } from '../../../nimble-components/src/mapping/icon';
 import { iconCheckTag } from '../../../nimble-components/src/icons/check';
 import { iconTriangleTag } from '../../../nimble-components/src/icons/triangle';
+import { iconTriangleFilledTag } from '../../../nimble-components/src/icons/triangle-filled';
 import { iconXmarkTag } from '../../../nimble-components/src/icons/xmark';
 import { tableFitRowsHeight } from '../../../nimble-components/src/theme-provider/design-tokens';
 import { ComponentFrameworkStatus } from './types';
@@ -136,6 +137,16 @@ const components = [
         angularStatus: ComponentFrameworkStatus.ready,
         blazorStatus: ComponentFrameworkStatus.ready
     },
+    {
+        componentName: 'Chat',
+        componentHref: './?path=/docs/spright-chat--docs',
+        designHref:
+            'https://www.figma.com/design/PO9mFOu5BCl8aJvFchEeuN/Nimble_Components?node-id=12342-81782&node-type=canvas&t=L5GvLaC3injrqWrR-0',
+        designLabel: 'Figma',
+        componentStatus: ComponentFrameworkStatus.spright,
+        angularStatus: ComponentFrameworkStatus.doesNotExist,
+        blazorStatus: ComponentFrameworkStatus.doesNotExist
+    },
     {
         componentName: 'Checkbox',
         componentHref: './?path=/docs/components-checkbox--docs',
@@ -547,6 +558,7 @@ const components = [
 
 const iconMappings = html`
     <${mappingIconTag} key="${ComponentFrameworkStatus.ready}" text="Ready" icon="${iconCheckTag}" severity="success" text-hidden></${mappingIconTag}>
+    <${mappingIconTag} key="${ComponentFrameworkStatus.spright}" text="Spright" icon="${iconTriangleFilledTag}" severity="success"></${mappingIconTag}>
     <${mappingIconTag} key="${ComponentFrameworkStatus.incubating}" text="Incubating" icon="${iconTriangleTag}" severity="warning"></${mappingIconTag}>
     <${mappingIconTag} key="${ComponentFrameworkStatus.doesNotExist}" text="Does not exist" icon="${iconXmarkTag}" severity="error"></${mappingIconTag}>
 `;

packages/storybook/src/docs/types.ts

@@ -1,5 +1,6 @@
 export const ComponentFrameworkStatus = {
     ready: 'ready',
+    spright: 'spright',
     incubating: 'incubating',
     doesNotExist: 'does_not_exist'
 } as const;

packages/storybook/src/spright/chat/chat-conversation.react.tsx

@@ -0,0 +1,4 @@
+import { ChatConversation } from '../../../../spright-components/src/chat/conversation';
+import { wrap } from '../../utilities/react-wrapper';
+
+export const SprightChatConversation = wrap(ChatConversation);