docs(chat-pane): chat-pane prototype

CHANGELOG.md

@@ -27,7 +27,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ### Documentation
 - Improve `Contributing` documentation for accessibility @jurokapsiar ([#303](https://github.com/stardust-ui/react/pull/303))
-- Add theme switcher for exploring different themes on the docs (under development mode flag) @mnajdova ([#280](https://github.com/stardust-ui/react/pull/280))
+- Add theme switcher for exploring different themes on the docs (only available in development mode) @mnajdova ([#280](https://github.com/stardust-ui/react/pull/280))
+- Add `Prototypes` section and `Chat Pane` prototype (only available in development mode) @Bugaa92 ([#235](https://github.com/stardust-ui/react/pull/235))
 
 <!--------------------------------[ v0.8.0 ]------------------------------- -->
 ## [v0.8.0](https://github.com/stardust-ui/react/tree/v0.8.0) (2018-10-01)

docs/src/components/Sidebar/Sidebar.tsx

@@ -235,6 +235,16 @@ class Sidebar extends React.Component<any, any> {
                 </Menu.Item>
               </Menu.Menu>
             </Menu.Item>
+            {process.env.NODE_ENV !== 'production' && (
+              <Menu.Item>
+                Prototypes
+                <Menu.Menu>
+                  <Menu.Item as={NavLink} exact to="/prototype-chat-pane" activeClassName="active">
+                    Chat Pane
+                  </Menu.Item>
+                </Menu.Menu>
+              </Menu.Item>
+            )}
             <Menu.Item active>
               <SemanticUIInput
                 className="transparent inverted icon"

docs/src/prototypes/chatPane/chatPaneContent.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react'
+import * as _ from 'lodash'
+import Scrollbars from 'react-custom-scrollbars'
+import { Chat, Divider } from '@stardust-ui/react'
+
+import { IChat, ChatItemType, generateChatProps } from './services'
+
+export interface IChatPaneContainerProps {
+  chat: IChat
+}
+
+class ChatPaneContainer extends React.PureComponent<IChatPaneContainerProps> {
+  public render() {
+    const items = this.generateChatItems(this.props.chat)
+
+    return (
+      items.length > 0 && (
+        <Scrollbars ref={this.handleScrollRef}>
+          <Chat items={items} styles={{ padding: '0 32px' }} />
+        </Scrollbars>
+      )
+    )
+  }
+
+  private generateChatItems(chat: IChat): JSX.Element[] {
+    return generateChatProps(chat).map(({ itemType, ...props }, index) => {
+      const ElementType = this.getElementType(itemType)
+      return (
+        <Chat.Item key={`chat-item-${index}`}>
+          <ElementType {...props} />
+        </Chat.Item>
+      )
+    })
+  }
+
+  private getElementType = (itemType: ChatItemType) => {
+    switch (itemType) {
+      case ChatItemType.message:
+        return Chat.Message
+      case ChatItemType.divider:
+        return Divider
+    }
+  }
+
+  private handleScrollRef(scrollRef: Scrollbars) {
+    if (scrollRef) {
+      scrollRef.scrollToBottom()
+    }
+  }
+}
+
+export default ChatPaneContainer

docs/src/prototypes/chatPane/chatPaneHeader.tsx

@@ -0,0 +1,100 @@
+import * as React from 'react'
+import { Avatar, Button, Divider, Icon, Layout, Segment, Text } from '@stardust-ui/react'
+
+import { pxToRem } from 'src/lib'
+import { IChat } from './services'
+import { Sizes } from 'src/lib/enums'
+
+export interface IChatPaneHeaderProps {
+  chat?: IChat
+}
+
+class ChatPaneHeader extends React.PureComponent<IChatPaneHeaderProps> {
+  public render() {
+    return (
+      <Layout
+        vertical
+        start={this.renderBanner()}
+        main={this.renderMainArea()}
+        end={<Divider size={2} styles={{ padding: '0 32px' }} />}
+      />
+    )
+  }
+
+  private renderBanner(): React.ReactNode {
+    return (
+      <Segment
+        content={
+          <Icon
+            size="big"
+            name="team-create"
+            variables={siteVars => ({ color: siteVars.white, margin: 'auto 8px' })}
+          />
+        }
+        styles={({ variables: v }) => ({
+          backgroundColor: v.backgroundColor,
+          borderRadius: 0,
+          display: 'flex',
+          height: '40px',
+          padding: 0,
+        })}
+        variables={siteVars => ({ backgroundColor: siteVars.brand })}
+      />
+    )
+  }
+
+  private renderMainArea(): React.ReactNode {
+    const { chat } = this.props
+
+    return (
+      <Layout
+        start={<Avatar name={chat.title} />}
+        main={
+          <Text
+            size={Sizes.Large}
+            content={chat.title}
+            styles={{ marginLeft: '12px', fontWeight: 600 }}
+          />
+        }
+        end={this.renderHeaderButtons()}
+        alignItems="center"
+        styles={{ padding: '16px 32px' }}
+      />
+    )
+  }
+
+  private renderHeaderButtons(): React.ReactNode {
+    return (
+      <div style={{ display: 'inline-flex' }}>
+        <Button.Group
+          circular
+          buttons={['call-video', 'call'].map((name, index) => ({
+            key: `${index}-${name}`,
+            icon: {
+              name,
+              size: 'big',
+              variables: siteVars => ({ color: siteVars.white, margin: 'auto 8px' }),
+            },
+            type: 'primary',
+          }))}
+          styles={{ marginRight: '20px' }}
+        />
+        {['user plus', 'ellipsis horizontal'].map((name, index) => (
+          <Icon
+            key={`${index}-${name}`}
+            name={name}
+            tabIndex={0}
+            styles={{
+              fontWeight: 100,
+              ...(!index && { marginRight: '1.6rem' }),
+              marginTop: pxToRem(8),
+            }}
+            variables={siteVars => ({ color: siteVars.gray04 })}
+          />
+        ))}
+      </div>
+    )
+  }
+}
+
+export default ChatPaneHeader

docs/src/prototypes/chatPane/chatPaneLayout.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react'
+import { Layout } from '@stardust-ui/react'
+import { IChat } from './services'
+
+import ChatPaneHeader from './chatPaneHeader'
+import ChatPaneContainer from './chatPaneContent'
+import ComposeMessage from './composeMessage'
+
+export interface IChatPaneLayoutProps {
+  chat: IChat
+}
+
+const ChatPaneLayout: React.SFC<IChatPaneLayoutProps> = ({ chat }: IChatPaneLayoutProps) => (
+  <Layout
+    vertical
+    start={<ChatPaneHeader chat={chat} />}
+    main={<ChatPaneContainer chat={chat} />}
+    end={<ComposeMessage />}
+    styles={{
+      backgroundColor: '#f3f2f1',
+      left: 0,
+      paddingLeft: '250px',
+      width: '100%',
+      height: '100%',
+      position: 'fixed',
+    }}
+  />
+)
+
+export default ChatPaneLayout

docs/src/prototypes/chatPane/composeMessage.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { Layout, Input, ToolbarButtonBehavior, ToolbarBehavior, Menu } from '@stardust-ui/react'
+import { IMenuItemProps } from 'src/components/Menu/MenuItem'
+
+type ToolbarProps = IMenuItemProps & { key: string; 'aria-label'?: string }
+
+class ComposeMessage extends React.Component {
+  public render() {
+    return (
+      <Layout
+        vertical
+        start={this.renderInput()}
+        main={this.renderToolbar()}
+        styles={{ padding: '16px 32px' }}
+      />
+    )
+  }
+
+  private renderInput(): React.ReactNode {
+    return (
+      <Input
+        fluid
+        placeholder="Type a message"
+        variables={siteVars => ({ backgroundColor: siteVars.white })}
+      />
+    )
+  }
+
+  private renderToolbar(): React.ReactNode {
+    const items: (ToolbarProps | JSX.Element)[] = [
+      'compose',
+      'attach',
+      'smile',
+      'picture',
+      'smile outline',
+      'calendar alternate',
+      'ellipsis horizontal',
+      'send',
+    ].map((icon, index) => this.getMenuItem(icon, index))
+
+    items.splice(-1, 0, { key: 'separator', styles: { flex: 1 } })
+
+    return (
+      <Menu
+        defaultActiveIndex={0}
+        items={items}
+        iconOnly
+        accessibility={ToolbarBehavior}
+        aria-label="Compose Editor"
+        styles={{ marginTop: '10px' }}
+      />
+    )
+  }
+
+  private getMenuItem(
+    name: string,
+    index: number,
+  ): IMenuItemProps & { key: string; 'aria-label': string } {
+    return {
+      key: `${index}-${name}`,
+      icon: {
+        name,
+        xSpacing: 'both',
+        variables: siteVars => ({ color: siteVars.gray02 }),
+      },
+      accessibility: ToolbarButtonBehavior,
+      'aria-label': `${name} tool`,
+    }
+  }
+}
+
+export default ComposeMessage

docs/src/prototypes/chatPane/index.tsx

@@ -0,0 +1,22 @@
+import * as React from 'react'
+import { Provider } from '@stardust-ui/react'
+
+import ChatPaneLayout from './chatPaneLayout'
+import { getChatMock } from './services'
+
+const chatMock = getChatMock({ msgCount: 40, userCount: 6 })
+
+export default () => (
+  <Provider
+    theme={{
+      componentStyles: {
+        Layout: {
+          start: { display: 'block' },
+          end: { display: 'block' },
+        },
+      },
+    }}
+  >
+    <ChatPaneLayout chat={chatMock.chat} />
+  </Provider>
+)

docs/src/prototypes/chatPane/services/dataMock.ts

@@ -0,0 +1,89 @@
+import * as _ from 'lodash'
+import { lorem, random, name, internet } from 'faker'
+import { IMessage, IUser, IChat, UserStatus, getTimestamp, getRandomDates } from '.'
+
+export interface ChatOptions {
+  userCount?: number
+  msgCount?: number
+}
+
+const userStatuses: UserStatus[] = ['Available', 'Away', 'DoNotDisturb', 'Offline']
+
+class ChatMock {
+  private static readonly minUserCount = 2
+  private static readonly defaultCount = 10
+  private static readonly daysAgo = 40
+  private static readonly defaultChatTitle = 'Test Chat'
+
+  private userIds: string[] = []
+  private usersMap: Map<string, IUser> = new Map()
+  private chatMessages: IMessage[] = []
+  public chat: IChat
+
+  constructor(
+    private options: ChatOptions = {
+      userCount: ChatMock.defaultCount,
+      msgCount: ChatMock.defaultCount,
+    },
+  ) {
+    if (this.options.userCount < ChatMock.minUserCount) {
+      throw `[ChatMock]: A chat has a minimum of ${ChatMock.minUserCount} users`
+    }
+
+    this.userIds = _.times(this.options.userCount, random.uuid)
+
+    this.userIds.forEach(id => {
+      const firstName = name.firstName()
+      const lastName = name.lastName()
+      const user: IUser = {
+        id,
+        firstName,
+        lastName,
+        avatar: internet.avatar(),
+        displayName: internet.userName(firstName, lastName),
+        email: internet.email(firstName, lastName),
+        status: userStatuses[_.random(userStatuses.length - 1)],
+      }
+
+      this.usersMap.set(id, user)
+    })
+
+    const currentUser = this.usersMap.get(this.userIds[0])
+    const dates = getRandomDates(this.options.msgCount, ChatMock.daysAgo)
+
+    this.chatMessages = _.times(this.options.msgCount, id => {
+      const mine = random.boolean()
+      const from = (mine ? currentUser : this.getRandomUser()).id
+      const date = dates[id]
+      const timestamp = getTimestamp(date)
+
+      const message: IMessage = {
+        id,
+        from,
+        mine,
+        date,
+        content: lorem.sentences(_.random(1, 5, false)),
+        timestamp: timestamp.short,
+        timestampLong: timestamp.long,
+        isImportant: random.boolean(),
+      }
+
+      return message
+    }).sort((a, b) => a.date - b.date)
+
+    this.chat = {
+      id: random.uuid(),
+      currentUser,
+      isOneOnOne: this.usersMap.size === ChatMock.minUserCount,
+      messages: this.chatMessages,
+      members: this.usersMap,
+      title: ChatMock.defaultChatTitle,
+    }
+  }
+
+  private getRandomUser(max: number = this.usersMap.size - 1): IUser {
+    return this.usersMap.get(this.userIds[random.number({ max, precision: 1 })])
+  }
+}
+
+export const getChatMock = (options?: ChatOptions) => new ChatMock(options)