@superdispatch/ui-lab 0.23.0 → 0.23.3

package/dist-src/chat/Chat.js

@@ -8,13 +8,9 @@ var ChatContainer = /*#__PURE__*/styled('div').withConfig({
   componentId: "SD__sc-qksih8-0"
 })(_ref => {
   var {
-    isEmpty,
-    minWidth,
-    maxWidth,
-    minHeight,
-    maxHeight
+    isEmpty
   } = _ref;
-  return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: ").concat(minWidth || 432, "px;\n  max-width: ").concat(maxWidth || 560, "px;\n  min-height: ").concat(minHeight || 368, "px;\n  max-height: ").concat(maxHeight || 696, "px;\n  padding: 16px;\n  box-sizing: border-box;\n");
+  return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
 });
 
 function emptyPlaceholder(text) {
@@ -28,6 +24,7 @@ function emptyPlaceholder(text) {
 export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
   var {
     children,
+    className,
     emptyText = 'No new messages'
   } = _ref2;
   var isEmpty = Children.toArray(children).length === 0;
@@ -35,6 +32,7 @@ export var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
     "data-testid": "chat-container",
     isEmpty: isEmpty,
     ref: ref,
+    className: className,
     children: /*#__PURE__*/_jsx(Stack, {
       space: "small",
       children: isEmpty ? emptyPlaceholder(emptyText) : children

package/dist-src/chat/ChatMessage.js

@@ -1,4 +1,5 @@
 import { Typography } from '@material-ui/core';
+import { formatDate } from '@superdispatch/dates';
 import { Inline, Stack } from '@superdispatch/ui';
 import { Box } from '@superdispatch/ui-lab';
 import { forwardRef } from 'react';
@@ -12,6 +13,9 @@ export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
     text,
     variant
   } = _ref;
+  var time = formatDate(dateTime, {
+    variant: 'Time'
+  });
   return /*#__PURE__*/_jsxs(Stack, {
     space: "xxsmall",
     align: variant === 'outgoing' ? 'right' : 'left',
@@ -27,7 +31,7 @@ export var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
         children: role
       }), /*#__PURE__*/_jsx(Typography, {
         color: "textSecondary",
-        children: dateTime
+        children: time
       })]
     }), /*#__PURE__*/_jsx(Box, {
       display: "inline-block",

package/dist-src/index.js

@@ -3,6 +3,8 @@ export * from "./banner/Banner.js";
 export * from "./box/Box.js";
 export * from "./button-area/ButtonArea.js";
 export * from "./button/Button.js";
+export * from "./chat/Chat.js";
+export * from "./chat/ChatMessage.js";
 export * from "./container/Container.js";
 export * from "./description-item/DescriptionItem.js";
 export * from "./file-drop-zone/FileDropZone.js";

package/dist-types/index.d.ts

@@ -5,6 +5,8 @@ import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
 import { SpaceProp, NegativeSpaceProp, ResponsiveProp, ColorProp } from '@superdispatch/ui';
 import { Property } from 'csstype';
 import { ButtonBaseProps, AvatarProps, IconButtonProps, TooltipProps } from '@material-ui/core';
+import { PrimitiveDateInput } from '@superdispatch/dates';
+import { DateTime } from 'luxon';
 import { FileRejection } from 'react-dropzone';
 import { StyledComponent, DefaultTheme } from 'styled-components';
 
@@ -119,6 +121,23 @@ interface AnchorButtonProps extends BaseButtonProps<HTMLAnchorElement> {
 }
 declare const AnchorButton: ForwardRefExoticComponent<AnchorButtonProps & RefAttributes<HTMLAnchorElement>>;
 
+
+interface ChatProps {
+    className?: string;
+    children?: React.ReactNode | React.ReactNode[];
+    emptyText?: string;
+}
+declare const Chat: ForwardRefExoticComponent<ChatProps & RefAttributes<HTMLDivElement>>;
+
+interface ChatMessageProps {
+    author: string;
+    role: string;
+    dateTime: Date | DateTime | PrimitiveDateInput;
+    text: string;
+    variant: 'incoming' | 'outgoing';
+}
+declare const ChatMessage: ForwardRefExoticComponent<ChatMessageProps & RefAttributes<HTMLDivElement>>;
+
 declare type ContainerProps = HTMLAttributes<HTMLDivElement> & {
     fullViewportHeight?: boolean;
 };
@@ -373,4 +392,4 @@ interface TextBoxProps {
 }
 declare const TextBox: ForwardRefExoticComponent<TextBoxProps & RefAttributes<HTMLElement>>;
 
-export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AlertProps, AlertSeverityProp, AnchorButton, AnchorButtonProps, Banner, BorderRadiusProp, BorderWidthProp, Box, BoxProps, Button, ButtonArea, ButtonAreaProps, ButtonProps, ButtonSizeProp, ButtonVariantProp, Chat, ChatMessage, Container, ContainerProps, DescriptionItem, DescriptionItemProps, FileDropZone, FileDropZoneProps, FileListItem, FileListItemProps, LinkComponentProps, LinkedText, LinkedTextProps, MarginProp, MultilineText, MultilineTextProps, Navbar, NavbarAccordionOptions, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarBottomBarItem, NavbarItem, NavbarItemOptions, NavbarItemProps, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, NavbarMenuItemOption, Sidebar, SidebarBackButton, SidebarContainer, SidebarContainerProps, SidebarContent, SidebarContentProps, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemActionProps, SidebarMenuItemAvatar, SidebarMenuItemAvatarProps, SidebarMenuItemProps, SidebarProps, SidebarSubheader, SidebarSubheaderProps, TextAlignProp, TextBox, TextBoxProps, TextColorProp, TextDisplayProp, TextVariantProp, formatBytes, toBytes, useNavbarContext, useSidebarContext };

package/dist-web/index.js

@@ -1,13 +1,15 @@
 import { CheckCircle, Info, Error as Error$1, Image, Refresh, Delete, Menu, ExpandMore, MenuOpen, ArrowBack, OpenInNew } from '@material-ui/icons';
 import { Alert as Alert$1 } from '@material-ui/lab';
-import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, mergeRefs, useUID, isEmptyReactNode, Columns, Column, Inline, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
-import { forwardRef, useState, useEffect, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
+import { Color, parseResponsiveProp, isColorProp, parseSpaceProp, Stack, Inline, mergeRefs, useUID, isEmptyReactNode, Columns, Column, CardButton, useResponsiveValue, useCollapseBreakpoint } from '@superdispatch/ui';
+import { forwardRef, useState, useEffect, Children, useRef, useLayoutEffect, Suspense, memo, useContext, createContext, useMemo, createElement } from 'react';
 import styled, { css, keyframes } from 'styled-components';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _objectWithoutProperties from '@babel/runtime/helpers/objectWithoutProperties';
 import { CSSTransition } from 'react-transition-group';
 import { ButtonBase, Typography, CircularProgress, SvgIcon, Link, Tooltip, IconButton, BottomNavigation, BottomNavigationAction, Accordion, AccordionSummary, useTheme, useMediaQuery, Drawer, Avatar, MenuItem, Menu as Menu$1, Toolbar, AppBar, Divider as Divider$1, Checkbox } from '@material-ui/core';
+import { formatDate } from '@superdispatch/dates';
+import { Box as Box$1 } from '@superdispatch/ui-lab';
 import { mdiUpload, mdiFilePdfBox, mdiTextBox } from '@mdi/js';
 import Dropzone from 'react-dropzone';
 import { Anchorme } from 'react-anchorme';
@@ -524,6 +526,89 @@ var AnchorButton = /*#__PURE__*/forwardRef((_ref5, ref) => {
 });
 if (process.env.NODE_ENV !== "production") AnchorButton.displayName = "AnchorButton";
 
+var ChatContainer = /*#__PURE__*/styled('div').withConfig({
+  displayName: "Chat__ChatContainer",
+  componentId: "SD__sc-qksih8-0"
+})(_ref => {
+  var {
+    isEmpty
+  } = _ref;
+  return "\n  display: flex;\n  flex-direction: column-reverse;\n  overflow: auto;\n  justify-content: ".concat(isEmpty ? 'center' : 'end', ";\n  width: 100%;\n  height: 100%;\n  min-width: 300px;\n  max-width: 560px;\n  min-height: 368px;\n  max-height: 696px;\n  padding: 16px;\n  box-sizing: border-box;\n");
+});
+
+function emptyPlaceholder(text) {
+  return /*#__PURE__*/jsx(Typography, {
+    color: "textSecondary",
+    align: "center",
+    children: text
+  });
+}
+
+var Chat = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  var {
+    children,
+    className,
+    emptyText = 'No new messages'
+  } = _ref2;
+  var isEmpty = Children.toArray(children).length === 0;
+  return /*#__PURE__*/jsx(ChatContainer, {
+    "data-testid": "chat-container",
+    isEmpty: isEmpty,
+    ref: ref,
+    className: className,
+    children: /*#__PURE__*/jsx(Stack, {
+      space: "small",
+      children: isEmpty ? emptyPlaceholder(emptyText) : children
+    })
+  });
+});
+if (process.env.NODE_ENV !== "production") Chat.displayName = "Chat";
+Chat.displayName = 'Chat';
+
+var ChatMessage = /*#__PURE__*/forwardRef((_ref, ref) => {
+  var {
+    author,
+    role,
+    dateTime,
+    text,
+    variant
+  } = _ref;
+  var time = formatDate(dateTime, {
+    variant: 'Time'
+  });
+  return /*#__PURE__*/jsxs(Stack, {
+    space: "xxsmall",
+    align: variant === 'outgoing' ? 'right' : 'left',
+    ref: ref,
+    "data-testid": "chat-message",
+    children: [/*#__PURE__*/jsxs(Inline, {
+      verticalAlign: "center",
+      children: [/*#__PURE__*/jsx(Typography, {
+        color: "textPrimary",
+        children: author
+      }), /*#__PURE__*/jsx(Typography, {
+        color: "textSecondary",
+        children: role
+      }), /*#__PURE__*/jsx(Typography, {
+        color: "textSecondary",
+        children: time
+      })]
+    }), /*#__PURE__*/jsx(Box$1, {
+      display: "inline-block",
+      padding: "xsmall",
+      marginTop: "none",
+      borderRadius: "medium",
+      backgroundColor: variant === 'outgoing' ? 'Blue50' : 'Silver200',
+      children: /*#__PURE__*/jsx(Typography, {
+        color: "textPrimary",
+        children: text
+      })
+    })]
+  });
+});
+if (process.env.NODE_ENV !== "production") ChatMessage.displayName = "ChatMessage";
+ChatMessage.displayName = 'ChatMessage';
+
 var _excluded$3 = ["fullViewportHeight"];
 var Container = /*#__PURE__*/forwardRef((_ref, ref) => {
   var {
@@ -2095,5 +2180,5 @@ var SidebarSubheader = /*#__PURE__*/forwardRef((_ref, ref) => {
 });
 if (process.env.NODE_ENV !== "production") SidebarSubheader.displayName = "SidebarSubheader";
 
-export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Container, DescriptionItem, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
+export { Alert, AnchorButton, Banner, Box, Button, ButtonArea, Chat, ChatMessage, Container, DescriptionItem, FileDropZone, FileListItem, LinkedText, MultilineText, Navbar, NavbarAvatar, NavbarBadge, NavbarBottomBar, NavbarItem, NavbarLabel, NavbarList, NavbarMenu, NavbarMenuItem, Sidebar, SidebarBackButton, SidebarContainer, SidebarContent, SidebarDivider, SidebarMenuItem, SidebarMenuItemAction, SidebarMenuItemAvatar, SidebarSubheader, TextBox, formatBytes, toBytes, useNavbarContext, useSidebarContext };
 //# sourceMappingURL=index.js.map