@superdispatch/ui-lab 0.50.4 → 0.50.5

package/src/chat/Chat.stories.tsx

@@ -0,0 +1,130 @@
+import { Card } from '@material-ui/core';
+import { Meta } from '@storybook/react';
+import { Box } from '@superdispatch/ui-lab';
+import styled from 'styled-components';
+import { Chat } from './Chat';
+import { ChatMessage } from './ChatMessage';
+
+export default { title: 'Lab/Chat', component: Chat } as Meta;
+
+export const SingleMessage = () => (
+  <Box maxWidth="560px">
+    <Card>
+      <Chat>
+        <ChatMessage
+          variant="outgoing"
+          author="You"
+          role="dispatcher"
+          dateTime="2023-06-16T09:48:43.291212+00:00"
+          text="Hello. Just wanted to check how the messaging works :) As a reminder, pickup should be done during the morning hours 9 – 11 AM!"
+        />
+      </Chat>
+    </Card>
+  </Box>
+);
+
+export const EmptyArrayChat = () => (
+  <Box>
+    <Card>
+      <Chat emptyText="Array is empty">{[]}</Chat>
+    </Card>
+  </Box>
+);
+
+export const EmptyNullableChat = () => (
+  <Box>
+    <Card>
+      <Chat>{null}</Chat>
+    </Card>
+  </Box>
+);
+
+export const MultipleMessages = () => (
+  <Box maxWidth="560px">
+    <Card>
+      <Chat>
+        <ChatMessage
+          variant="incoming"
+          author="Steve Trabajo"
+          role="dispatcher"
+          dateTime="2023-06-16T09:48:43.291212+00:00"
+          text="Hello, Vin! Just to confirm, load is completed."
+        />
+        <ChatMessage
+          variant="outgoing"
+          author="Daisy Lord"
+          role="admin"
+          dateTime="2023-06-16T09:49:00.291212+00:00"
+          text="Hey, Steve. Awesome, thanks!"
+        />
+        <ChatMessage
+          variant="outgoing"
+          author="John Wick"
+          role="admin"
+          dateTime="2023-06-16T09:51:11.291212+00:00"
+          text="Hey, Steve. Awesome, thanks!"
+        />
+        <ChatMessage
+          variant="outgoing"
+          author="Lora Accounting"
+          role="accounting"
+          dateTime="2023-06-16T11:59:43.291212+00:00"
+          text="Can’t wait this load to be delivered to start my part :)"
+        />
+      </Chat>
+    </Card>
+  </Box>
+);
+
+export const LoremIpsum = () => (
+  <Box maxWidth="560px">
+    <Card>
+      <Chat>
+        <ChatMessage
+          variant="incoming"
+          author="Steve Trabajo"
+          role="dispatcher"
+          dateTime="2023-06-16T06:48:43.291212+00:00"
+          text="Hello, Vin! Just to confirm, load is completed."
+        />
+        <ChatMessage
+          variant="outgoing"
+          author="Daisy Lord"
+          role="admin"
+          dateTime="2023-06-16T09:49:43.291212+00:00"
+          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Leo vel orci porta non pulvinar neque laoreet suspendisse interdum. Justo eget magna fermentum iaculis eu non diam. Fames ac turpis egestas maecenas. Justo laoreet sit amet cursus sit amet dictum sit. Et pharetra pharetra massa massa ultricies mi. Felis eget velit aliquet sagittis. Scelerisque in dictum non consectetur a erat nam. Amet nulla facilisi morbi tempus. Imperdiet nulla malesuada pellentesque elit eget gravida cum. A iaculis at erat pellentesque. Eget mauris pharetra et ultrices neque ornare aenean euismod. Amet purus gravida quis blandit turpis cursus in hac habitasse. Sit amet dictum sit amet justo donec. Tortor id aliquet lectus proin nibh nisl condimentum id. Condimentum mattis pellentesque id nibh tortor.
+          "
+        />
+        <ChatMessage
+          variant="incoming"
+          author="John Wick"
+          role="admin"
+          dateTime="2023-06-16T09:53:43.291212+00:00"
+          text="Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Integer vitae justo eget magna fermentum iaculis. Dapibus ultrices in iaculis nunc sed augue. Eget magna fermentum iaculis eu non diam phasellus. Libero nunc consequat interdum varius sit. Eget velit aliquet sagittis id consectetur purus ut. Sed vulputate mi sit amet mauris commodo. Gravida rutrum quisque non tellus. Feugiat sed lectus vestibulum mattis ullamcorper. Vitae aliquet nec ullamcorper sit."
+        />
+        <ChatMessage
+          variant="outgoing"
+          author="Lora Accounting"
+          role="accounting"
+          dateTime="2023-06-16T13:01:43.291212+00:00"
+          text="Dolor sit amet consectetur adipiscing. Diam sit amet nisl suscipit. Egestas sed sed risus pretium quam. Non consectetur a erat nam at lectus urna. Odio eu feugiat pretium nibh ipsum consequat. Volutpat odio facilisis mauris sit. Consectetur a erat nam at lectus urna duis convallis. Ac turpis egestas sed tempus urna et pharetra pharetra massa. Sed turpis tincidunt id aliquet risus feugiat in. Sollicitudin aliquam ultrices sagittis orci a scelerisque purus semper. Venenatis cras sed felis eget velit aliquet sagittis id consectetur. Arcu felis bibendum ut tristique et egestas. Cursus eget nunc scelerisque viverra mauris. Luctus accumsan tortor posuere ac ut consequat. Justo nec ultrices dui sapien eget mi proin sed. Egestas erat imperdiet sed euismod nisi porta. Amet venenatis urna cursus eget nunc scelerisque."
+        />
+      </Chat>
+    </Card>
+  </Box>
+);
+
+const StyledChat = styled(Chat)`
+  min-width: 200px;
+  max-width: 200px;
+  min-height: 200px;
+  max-height: 200px;
+`;
+
+export const StylingTheChat = () => (
+  <Box>
+    <Card>
+      <StyledChat emptyText="200x200" />
+    </Card>
+  </Box>
+);

package/src/chat/Chat.tsx

@@ -0,0 +1,57 @@
+import { Typography } from '@material-ui/core';
+import { Stack } from '@superdispatch/ui';
+import { Children, forwardRef } from 'react';
+import styled from 'styled-components';
+
+interface ChatProps {
+  className?: string;
+  children?: React.ReactNode | React.ReactNode[];
+  emptyText?: string;
+}
+
+const ChatContainer = styled('div')<{
+  isEmpty: boolean;
+}>(
+  ({ isEmpty }) => `
+  display: flex;
+  flex-direction: column-reverse;
+  overflow: auto;
+  justify-content: ${isEmpty ? 'center' : 'end'};
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  max-width: 560px;
+  min-height: 368px;
+  max-height: 696px;
+  padding: 16px;
+  box-sizing: border-box;
+`,
+);
+
+function emptyPlaceholder(text: string): React.ReactNode {
+  return (
+    <Typography color="textSecondary" align="center">
+      {text}
+    </Typography>
+  );
+}
+
+export const Chat = forwardRef<HTMLDivElement, ChatProps>(
+  ({ children, className, emptyText = 'No new messages' }, ref) => {
+    const isEmpty = Children.toArray(children).length === 0;
+    return (
+      <ChatContainer
+        data-testid="chat-container"
+        isEmpty={isEmpty}
+        ref={ref}
+        className={className}
+      >
+        <Stack space="small">
+          {isEmpty ? emptyPlaceholder(emptyText) : children}
+        </Stack>
+      </ChatContainer>
+    );
+  },
+);
+
+Chat.displayName = 'Chat';

package/src/chat/ChatMessage.tsx

@@ -0,0 +1,45 @@
+import { Typography } from '@material-ui/core';
+import { formatDate, PrimitiveDateInput } from '@superdispatch/dates';
+import { Inline, Stack } from '@superdispatch/ui';
+import { DateTime } from 'luxon';
+import { forwardRef } from 'react';
+import { Box } from '../box/Box';
+
+interface ChatMessageProps {
+  author: string;
+  role: string;
+  dateTime: Date | DateTime | PrimitiveDateInput;
+  text: string;
+  variant: 'incoming' | 'outgoing';
+}
+
+export const ChatMessage = forwardRef<HTMLDivElement, ChatMessageProps>(
+  ({ author, role, dateTime, text, variant }, ref) => {
+    const time = formatDate(dateTime, { variant: 'Time' });
+    return (
+      <Stack
+        space="xxsmall"
+        align={variant === 'outgoing' ? 'right' : 'left'}
+        ref={ref}
+        data-testid="chat-message"
+      >
+        <Inline verticalAlign="center">
+          <Typography color="textPrimary">{author}</Typography>
+          <Typography color="textSecondary">{role}</Typography>
+          <Typography color="textSecondary">{time}</Typography>
+        </Inline>
+        <Box
+          display="inline-block"
+          padding="xsmall"
+          marginTop="none"
+          borderRadius="medium"
+          backgroundColor={variant === 'outgoing' ? 'Blue50' : 'Silver200'}
+        >
+          <Typography color="textPrimary">{text}</Typography>
+        </Box>
+      </Stack>
+    );
+  },
+);
+
+ChatMessage.displayName = 'ChatMessage';

package/src/chat/README.MD

@@ -0,0 +1,7 @@
+# Chat component
+
+## Description
+
+Chat component is a container component that renders a list of messages and a form to send new messages.
+Each message displays the text of the message, the author, role, and date/time of the message.
+It displays the author's message on the right and the receiver's message on the left

package/src/chat/__tests__/Chat.spec.tsx

@@ -0,0 +1,29 @@
+import { renderComponent } from '@superdispatch/ui-testutils';
+import { screen } from '@testing-library/react';
+import { Chat } from '../Chat';
+import { ChatMessage } from '../ChatMessage';
+
+describe('Chat', () => {
+  it('Displays placeholder message when no messages are provided', () => {
+    renderComponent(<Chat />);
+
+    expect(screen.getByText(/No new messages/i)).toBeInTheDocument();
+  });
+
+  it('Renders provided messages', () => {
+    renderComponent(
+      <Chat>
+        <ChatMessage
+          variant="incoming"
+          author="Steve Trabajo"
+          role="dispatcher"
+          dateTime="2023-06-12 6:43PM"
+          text="Hello, Vin! ..."
+        />
+      </Chat>,
+    );
+
+    expect(screen.getByText('Steve Trabajo')).toBeInTheDocument();
+    expect(screen.getByText('Hello, Vin! ...')).toBeInTheDocument();
+  });
+});

package/src/chat/__tests__/ChatMessage.spec.tsx

@@ -0,0 +1,39 @@
+import { renderComponent } from '@superdispatch/ui-testutils';
+import { screen } from '@testing-library/react';
+import { ChatMessage } from '../ChatMessage';
+
+describe('ChatMessage', () => {
+  it('displays incoming message correctly', () => {
+    renderComponent(
+      <ChatMessage
+        variant="incoming"
+        author="Steve Trabajo"
+        role="dispatcher"
+        dateTime="2023-06-16T09:48:43.291212+00:00"
+        text="Hello, Vin! ..."
+      />,
+    );
+
+    expect(screen.getByText('Steve Trabajo')).toBeInTheDocument();
+    expect(screen.getByText('dispatcher')).toBeInTheDocument();
+    expect(screen.getByText('4:48 AM')).toBeInTheDocument();
+    expect(screen.getByText('Hello, Vin! ...')).toBeInTheDocument();
+  });
+
+  it('displays outgoing message correctly', () => {
+    renderComponent(
+      <ChatMessage
+        variant="outgoing"
+        author="Daisy Lord"
+        role="admin"
+        dateTime="2023-06-16T09:48:43.291212+00:00"
+        text="Hey Steve ..."
+      />,
+    );
+
+    expect(screen.getByText('Daisy Lord')).toBeInTheDocument();
+    expect(screen.getByText('admin')).toBeInTheDocument();
+    expect(screen.getByText('4:48 AM')).toBeInTheDocument();
+    expect(screen.getByText('Hey Steve ...')).toBeInTheDocument();
+  });
+});

package/src/container/Container.tsx

@@ -0,0 +1,48 @@
+import { mergeRefs } from '@superdispatch/ui';
+import { forwardRef, HTMLAttributes, useLayoutEffect, useRef } from 'react';
+
+export type ContainerProps = HTMLAttributes<HTMLDivElement> & {
+  fullViewportHeight?: boolean;
+};
+
+export const Container = forwardRef<HTMLDivElement, ContainerProps>(
+  ({ fullViewportHeight, ...props }, ref) => {
+    const nodeRef = useRef<HTMLDivElement | null>(null);
+
+    useLayoutEffect(() => {
+      if (!fullViewportHeight) {
+        if (nodeRef.current) {
+          nodeRef.current.style.removeProperty('height');
+          nodeRef.current.style.removeProperty('--vh');
+        }
+        return;
+      }
+
+      function updateHeight(): void {
+        if (nodeRef.current) {
+          // https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
+          nodeRef.current.style.setProperty(
+            'height',
+            'calc(var(--vh, 1vh) * 100)',
+          );
+          nodeRef.current.style.setProperty(
+            '--vh',
+            `${window.innerHeight * 0.01}px`,
+          );
+        }
+      }
+
+      updateHeight();
+
+      window.addEventListener('resize', updateHeight);
+
+      return () => {
+        window.removeEventListener('resize', updateHeight);
+      };
+    }, [fullViewportHeight]);
+
+    return <div ref={mergeRefs(ref, nodeRef)} {...props} />;
+  },
+);
+
+Container.displayName = 'Container';

package/src/description-item/DescriptionItem.stories.tsx

@@ -0,0 +1,163 @@
+import { Link } from '@material-ui/core';
+import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
+import DomainIcon from '@material-ui/icons/Domain';
+import FingerprintIcon from '@material-ui/icons/Fingerprint';
+import FlightLandIcon from '@material-ui/icons/FlightLand';
+import FlightTakeoffIcon from '@material-ui/icons/FlightTakeoff';
+import NotesIcon from '@material-ui/icons/Notes';
+import PaymentIcon from '@material-ui/icons/Payment';
+import PersonIcon from '@material-ui/icons/Person';
+import RoomIcon from '@material-ui/icons/Room';
+import { Meta } from '@storybook/react';
+import { PhoneLink } from '@superdispatch/phones';
+import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
+import { Box } from '../box/Box';
+import { TextBox } from '../text-box/TextBox';
+import { DescriptionItem } from './DescriptionItem';
+
+export default {
+  title: 'Lab/DescriptionItem',
+  component: DescriptionItem,
+} as Meta;
+
+export const basic = () => (
+  <Box maxWidth="200px">
+    <Stack>
+      <DescriptionItem icon={<PaymentIcon />} aria-label="payment">
+        <Inline space="xxsmall">
+          <TextBox color="purple">$1,503</TextBox>
+          COD
+          <TextBox color="secondary">$49.94/mi</TextBox>
+        </Inline>
+      </DescriptionItem>
+
+      <DescriptionItem icon={<CalendarTodayIcon />} label="Posted">
+        4 hr. ago
+      </DescriptionItem>
+
+      <DescriptionItem icon={<RoomIcon />} aria-label="address">
+        167 Zosh Rd, Dallas, PA 18612
+      </DescriptionItem>
+
+      <DescriptionItem icon={<FingerprintIcon />} label="ID">
+        202CB962AC59075B964B07152D234B70
+      </DescriptionItem>
+
+      <DescriptionItem icon={<NotesIcon />} label="Notes">
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </DescriptionItem>
+    </Stack>
+  </Box>
+);
+
+export const wrap = () => (
+  <Box maxWidth="200px">
+    <Stack>
+      <DescriptionItem icon={<RoomIcon />} wrap={true}>
+        167 Zosh Rd, Dallas, PA 18612
+      </DescriptionItem>
+
+      <DescriptionItem icon={<FingerprintIcon />} label="ID" wrap={true}>
+        202CB962AC59075B964B07152D234B70
+      </DescriptionItem>
+
+      <DescriptionItem icon={<NotesIcon />} label="Notes" wrap={true}>
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit.
+      </DescriptionItem>
+    </Stack>
+  </Box>
+);
+
+export const fallback = () => (
+  <Stack>
+    <DescriptionItem
+      icon={<CalendarTodayIcon />}
+      label="Posted on"
+      fallback="N/A"
+    >
+      {null}
+    </DescriptionItem>
+    <DescriptionItem icon={<RoomIcon />} fallback="No address available" />
+    <DescriptionItem icon={<NotesIcon />} fallback="No delivery notes">
+      {false}
+    </DescriptionItem>
+  </Stack>
+);
+
+export const inset = () => (
+  <Stack>
+    <Stack space="xxsmall">
+      <DescriptionItem icon={<PersonIcon />}>Antony Hoffman</DescriptionItem>
+      <DescriptionItem inset={true}>
+        <PhoneLink phone="+1 303 555 0105" format="national" />
+      </DescriptionItem>
+      <DescriptionItem inset={true}>
+        <Link href="mailto:dustin.russel@example.com">
+          dustin.russel@example.com
+        </Link>
+      </DescriptionItem>
+    </Stack>
+
+    <DescriptionItem icon={<RoomIcon />}>
+      167 Zosh Rd, Dallas, PA 18612
+    </DescriptionItem>
+  </Stack>
+);
+
+export const complex = () => (
+  <Box maxWidth="320px">
+    <Stack>
+      <Columns space="xsmall">
+        <Column width="adaptive">
+          <DescriptionItem icon={<DomainIcon />}>Fast Shipper</DescriptionItem>
+        </Column>
+
+        <Column width="adaptive">
+          <DescriptionItem icon={<CalendarTodayIcon />} label="Received">
+            4 hr. ago
+          </DescriptionItem>
+        </Column>
+      </Columns>
+
+      <Columns space="xsmall">
+        <Column width="adaptive">
+          <DescriptionItem icon={<FingerprintIcon />} label="Load ID">
+            02323
+          </DescriptionItem>
+        </Column>
+
+        <Column width="adaptive">
+          <DescriptionItem icon={<CalendarTodayIcon />} label="Received">
+            4 hr. ago
+          </DescriptionItem>
+        </Column>
+      </Columns>
+
+      <DescriptionItem icon={<FlightTakeoffIcon />}>
+        <Columns space="xxsmall">
+          <Column width="adaptive">
+            <TextBox noWrap={true}>Kansas City, MO 64105</TextBox>
+          </Column>
+          <Column width="adaptive">
+            <TextBox noWrap={true} color="secondary">
+              Oct 04, 2019
+            </TextBox>
+          </Column>
+        </Columns>
+      </DescriptionItem>
+
+      <DescriptionItem icon={<FlightLandIcon />}>
+        <Columns space="xxsmall">
+          <Column width="adaptive">
+            <TextBox noWrap={true}>Roeland Park, KS 66205</TextBox>
+          </Column>
+          <Column width="adaptive">
+            <TextBox noWrap={true} color="secondary">
+              Oct 04, 2019
+            </TextBox>
+          </Column>
+        </Columns>
+      </DescriptionItem>
+    </Stack>
+  </Box>
+);

package/src/description-item/DescriptionItem.tsx

@@ -0,0 +1,104 @@
+import {
+  ColorDynamic,
+  Column,
+  Columns,
+  Inline,
+  isEmptyReactNode,
+  useUID,
+} from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled, { css, SimpleInterpolation } from 'styled-components';
+import { TextBox } from '../text-box/TextBox';
+
+function descriptionItemIconMixin(
+  size: 16 | 20,
+): readonly SimpleInterpolation[] {
+  return css`
+    width: ${size}px;
+    height: ${size + 4}px;
+
+    & > .MuiSvgIcon-root {
+      font-size: ${size}px;
+    }
+  `;
+}
+
+const DescriptionItemIcon = styled.div(
+  ({ theme }) =>
+    css`
+      display: flex;
+      align-items: center;
+
+      & > .MuiSvgIcon-root {
+        color: ${ColorDynamic.Dark100};
+      }
+
+      ${descriptionItemIconMixin(20)};
+
+      ${theme.breakpoints.up('sm')} {
+        ${descriptionItemIconMixin(16)};
+      }
+    `,
+);
+
+export interface DescriptionItemProps {
+  id?: string;
+  'aria-label'?: string;
+
+  wrap?: boolean;
+  inset?: boolean;
+  icon?: ReactNode;
+  label?: ReactNode;
+  fallback?: ReactNode;
+  children?: ReactNode;
+}
+
+export const DescriptionItem = forwardRef<HTMLDivElement, DescriptionItemProps>(
+  (
+    {
+      icon,
+      wrap,
+      inset,
+      label,
+      children,
+      fallback,
+      id: idProp,
+      'aria-label': ariaLabel,
+    },
+    ref,
+  ) => {
+    const id = useUID(idProp);
+    const labelID = `${id}-label`;
+    const isEmptyChildren = isEmptyReactNode(children);
+
+    return (
+      <Columns id={id} ref={ref} space="xsmall" aria-label={ariaLabel}>
+        {!!(icon || inset) && (
+          <Column width="content">
+            <DescriptionItemIcon>{icon}</DescriptionItemIcon>
+          </Column>
+        )}
+
+        <Column width="adaptive">
+          <Inline space="xxsmall" noWrap={!wrap}>
+            {!!label && (
+              <TextBox as="label" id={labelID} color="secondary">
+                {label}
+              </TextBox>
+            )}
+
+            <TextBox
+              as="div"
+              noWrap={!wrap}
+              wrapOverflow={!!wrap}
+              aria-labelledby={label == null ? undefined : labelID}
+              color={isEmptyChildren && label == null ? 'secondary' : 'primary'}
+            >
+              {isEmptyChildren ? fallback : children}
+            </TextBox>
+          </Inline>
+        </Column>
+      </Columns>
+    );
+  },
+);

package/src/description-line-item/DescriptionLineItem.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta } from '@storybook/react';
+import { TextBox } from '../text-box/TextBox';
+import { DescriptionLineItem } from './DescriptionLineItem';
+
+export default {
+  title: 'Lab/DescriptionLineItem',
+  component: DescriptionLineItem,
+} as Meta;
+
+export const description = () => (
+  <>
+    <DescriptionLineItem title={<TextBox color="secondary">Payment</TextBox>}>
+      <TextBox align="right" color="primary" variant="heading-4">
+        $1,200
+      </TextBox>
+    </DescriptionLineItem>
+    <DescriptionLineItem title={<TextBox color="secondary">Method</TextBox>}>
+      <TextBox align="right" color="primary" variant="body">
+        Comcheck
+      </TextBox>
+    </DescriptionLineItem>
+  </>
+);

package/src/description-line-item/DescriptionLineItem.tsx

@@ -0,0 +1,29 @@
+import { ColorDynamic, Column, Columns } from '@superdispatch/ui';
+import { forwardRef, ReactNode } from 'react';
+import styled from 'styled-components';
+
+export const DottedLine = styled.div`
+  border-bottom: 1px dotted ${ColorDynamic.Silver400};
+  margin: 0px 8px;
+  height: 7px;
+`;
+
+interface DescriptionLineItemProps {
+  title: ReactNode;
+  children: ReactNode;
+}
+
+export const DescriptionLineItem = forwardRef<
+  HTMLDivElement,
+  DescriptionLineItemProps
+>(({ title, children }, ref) => (
+  <Columns ref={ref} align="center">
+    <Column width="content">{title}</Column>
+    <Column width="fluid">
+      <DottedLine />
+    </Column>
+    <Column width="content">{children}</Column>
+  </Columns>
+));
+
+DescriptionLineItem.displayName = 'DescriptionLineItem';