@superdispatch/ui-lab 0.21.8 → 0.21.12

package/src/file-list-item/__tests__/FileListItem.spec.tsx

@@ -0,0 +1,339 @@
+import { Stack } from '@superdispatch/ui';
+import { renderComponent } from '@superdispatch/ui-testutils';
+import { screen } from '@testing-library/react';
+import { FileListItem } from '../FileListItem';
+
+it('checks if delete button appears', () => {
+  renderComponent(<FileListItem name="TST1208 Dispatcher Info.pdf" />);
+
+  expect(screen.getAllByTitle('Delete')).toHaveLength(1);
+});
+
+it('checks if delete button dont appear', () => {
+  renderComponent(
+    <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />,
+  );
+
+  expect(screen.queryByTitle('Delete')).toBeNull();
+});
+
+it('checks if FileListItem renders properly', () => {
+  renderComponent(
+    <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />,
+  );
+
+  expect(screen.getByLabelText('file-list-item')).toMatchInlineSnapshot(`
+    <div
+      aria-label="file-list-item"
+    >
+      <div
+        class="Columns-SD__sc-1a73118-0 iVMHMK"
+      >
+        <div
+          class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+        >
+          <div>
+            <svg
+              aria-hidden="true"
+              class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
+              />
+            </svg>
+          </div>
+        </div>
+        <div
+          class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
+        >
+          <div>
+            <div
+              class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
+              id="uid_3"
+            >
+              TST1208 Dispatcher Info.pdf
+            </div>
+          </div>
+        </div>
+        <div
+          class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+        >
+          <div />
+        </div>
+      </div>
+    </div>
+  `);
+});
+
+it('checks if FileListItem renders', () => {
+  renderComponent(
+    <Stack aria-label="file-list-items-stack">
+      <FileListItem name="Read this document.txt" />
+      <FileListItem name="TST1208 Dispatcher Info.pdf" />
+      <FileListItem name="TST1208 Dispatcher Info.pdf" canDelete={false} />
+      <FileListItem
+        name="attachment.jpg"
+        url="https://picsum.photos/seed/picsum/1024/768"
+      />
+    </Stack>,
+  );
+
+  expect(screen.getByLabelText('file-list-items-stack')).toMatchInlineSnapshot(`
+    <div
+      aria-label="file-list-items-stack"
+      class="Stack__StackRoot-SD__sc-qkml7c-0 cNqlNY"
+    >
+      <div>
+        <div
+          aria-label="file-list-item"
+        >
+          <div
+            class="Columns-SD__sc-1a73118-0 iVMHMK"
+          >
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M14,17H7V15H14M17,13H7V11H17M17,9H7V7H17M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
+            >
+              <div>
+                <div
+                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
+                  id="uid_4"
+                >
+                  Read this document.txt
+                </div>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <button
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
+                  tabindex="0"
+                  title="Delete"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          aria-label="file-list-item"
+        >
+          <div
+            class="Columns-SD__sc-1a73118-0 iVMHMK"
+          >
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
+            >
+              <div>
+                <div
+                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
+                  id="uid_5"
+                >
+                  TST1208 Dispatcher Info.pdf
+                </div>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <button
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
+                  tabindex="0"
+                  title="Delete"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          aria-label="file-list-item"
+        >
+          <div
+            class="Columns-SD__sc-1a73118-0 iVMHMK"
+          >
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12,10.5H13V13.5H12V10.5M7,11.5H8V10.5H7V11.5M20,6V18A2,2 0 0,1 18,20H6A2,2 0 0,1 4,18V6A2,2 0 0,1 6,4H18A2,2 0 0,1 20,6M9.5,10.5A1.5,1.5 0 0,0 8,9H5.5V15H7V13H8A1.5,1.5 0 0,0 9.5,11.5V10.5M14.5,10.5A1.5,1.5 0 0,0 13,9H10.5V15H13A1.5,1.5 0 0,0 14.5,13.5V10.5M18.5,9H15.5V15H17V13H18.5V11.5H17V10.5H18.5V9Z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
+            >
+              <div>
+                <div
+                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
+                  id="uid_6"
+                >
+                  TST1208 Dispatcher Info.pdf
+                </div>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div />
+            </div>
+          </div>
+        </div>
+      </div>
+      <div>
+        <div
+          aria-label="file-list-item"
+        >
+          <div
+            class="Columns-SD__sc-1a73118-0 iVMHMK"
+          >
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <svg
+                  aria-hidden="true"
+                  class="MuiSvgIcon-root MuiSvgIcon-colorAction MuiSvgIcon-fontSizeSmall"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"
+                  />
+                </svg>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 hbBUFf"
+            >
+              <div>
+                <div
+                  class="FileListItem__FileListItemName-SD__sc-hxbsiy-0 gMzDXg"
+                  id="uid_7"
+                >
+                  Object {
+                    "pathname": "/seed/picsum/1024/768",
+                  }
+                </div>
+              </div>
+            </div>
+            <div
+              class="Column__ColumnRoot-SD__sc-m9n6o6-0 jNPayl"
+            >
+              <div>
+                <button
+                  class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeSmall"
+                  tabindex="0"
+                  title="Delete"
+                  type="button"
+                >
+                  <span
+                    class="MuiIconButton-label"
+                  >
+                    <svg
+                      aria-hidden="true"
+                      class="MuiSvgIcon-root MuiSvgIcon-fontSizeSmall"
+                      focusable="false"
+                      viewBox="0 0 24 24"
+                    >
+                      <path
+                        d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="MuiTouchRipple-root"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  `);
+});

package/src/index.spec.ts

@@ -0,0 +1,43 @@
+import * as api from '.';
+
+test('api', () => {
+  expect(api).toMatchInlineSnapshot(`
+    Object {
+      "Alert": React.forwardRef(Alert),
+      "AnchorButton": React.forwardRef(AnchorButton),
+      "Banner": React.forwardRef(Banner),
+      "Box": React.forwardRef(Box),
+      "Button": React.forwardRef(Button),
+      "ButtonArea": React.forwardRef(ButtonArea),
+      "Container": React.forwardRef(Container),
+      "DescriptionItem": React.forwardRef(DescriptionItem),
+      "FileDropZone": React.forwardRef(FileDropZone),
+      "FileListItem": React.forwardRef(FileListItem),
+      "LinkedText": [Function],
+      "MultilineText": React.forwardRef(MultilineText),
+      "Navbar": [Function],
+      "NavbarAvatar": [Function],
+      "NavbarBadge": React.forwardRef(NavbarItem__NavbarBadge),
+      "NavbarBottomBar": [Function],
+      "NavbarItem": [Function],
+      "NavbarLabel": React.forwardRef(NavbarItem__NavbarLabel),
+      "NavbarList": [Function],
+      "NavbarMenu": [Function],
+      "NavbarMenuItem": [Function],
+      "Sidebar": React.forwardRef(Sidebar),
+      "SidebarBackButton": [Function],
+      "SidebarContainer": React.forwardRef(SidebarContainer),
+      "SidebarContent": [Function],
+      "SidebarDivider": React.forwardRef(SidebarDivider),
+      "SidebarMenuItem": React.forwardRef(SidebarMenuItem),
+      "SidebarMenuItemAction": React.forwardRef(SidebarMenuItemAction),
+      "SidebarMenuItemAvatar": React.forwardRef(SidebarMenuItemAvatar),
+      "SidebarSubheader": React.forwardRef(SidebarSubheader),
+      "TextBox": React.forwardRef(TextBox),
+      "formatBytes": [Function],
+      "toBytes": [Function],
+      "useNavbarContext": [Function],
+      "useSidebarContext": [Function],
+    }
+  `);
+});

package/src/index.ts

@@ -0,0 +1,28 @@
+export * from './alert/Alert';
+export * from './banner/Banner';
+export * from './box/Box';
+export * from './button-area/ButtonArea';
+export * from './button/Button';
+export * from './container/Container';
+export * from './description-item/DescriptionItem';
+export * from './file-drop-zone/FileDropZone';
+export * from './file-list-item/FileListItem';
+export * from './linked-text/LinkedText';
+export * from './multiline-text/MultilineText';
+export * from './navbar/Navbar';
+export * from './navbar/NavbarAvatar';
+export * from './navbar/NavbarBottomBar';
+export { useNavbarContext } from './navbar/NavbarContext';
+export * from './navbar/NavbarItem';
+export * from './navbar/NavbarList';
+export * from './navbar/NavbarMenu';
+export * from './sidebar/Sidebar';
+export * from './sidebar/SidebarBackButton';
+export * from './sidebar/SidebarContainer';
+export * from './sidebar/SidebarContent';
+export * from './sidebar/SidebarDivider';
+export * from './sidebar/SidebarMenuItem';
+export * from './sidebar/SidebarMenuItemAction';
+export * from './sidebar/SidebarMenuItemAvatar';
+export * from './sidebar/SidebarSubheader';
+export * from './text-box/TextBox';

package/src/linked-text/LinkeText.stories.tsx

@@ -0,0 +1,42 @@
+import { Meta } from '@storybook/react';
+import { Stack } from '@superdispatch/ui';
+import { Box } from '../box/Box';
+import { LinkComponentProps, LinkedText } from './LinkedText';
+
+export default {
+  title: 'Lab/LinkedText',
+  component: LinkedText,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="200px">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta;
+
+export const basic = () => (
+  <Stack>
+    <LinkedText>
+      Component works with (http://www.google.com) or without (www.google.com)
+      protocols in link. Emails are detected too: email@ex.com
+    </LinkedText>
+  </Stack>
+);
+
+export const customLinkComponent = () => {
+  const CustomLinkComponent = ({ children, ...props }: LinkComponentProps) => (
+    <a {...props}>
+      <i>{children}</i>
+    </a>
+  );
+
+  return (
+    <Stack>
+      <LinkedText linkComponent={CustomLinkComponent}>
+        Component works with (http://www.google.com) or without (www.google.com)
+        protocols in link. Emails are detected too: email@ex.com
+      </LinkedText>
+    </Stack>
+  );
+};

package/src/linked-text/LinkedText.tsx

@@ -0,0 +1,47 @@
+import { Link } from '@material-ui/core';
+import {
+  AnchorHTMLAttributes,
+  forwardRef,
+  FunctionComponent,
+  ReactElement,
+} from 'react';
+import { Anchorme } from 'react-anchorme';
+
+export type LinkComponentProps = Omit<
+  AnchorHTMLAttributes<HTMLAnchorElement>,
+  'href'
+> & {
+  href: string;
+  truncate?: number;
+};
+
+const DefaultLinkComponent = forwardRef<HTMLAnchorElement, LinkComponentProps>(
+  (
+    { color, target = '_blank', rel = 'noreferrer noopener', ...props },
+    ref,
+  ) => <Link {...props} ref={ref} rel={rel} target={target} />,
+);
+
+DefaultLinkComponent.displayName = 'DefaultLinkComponent';
+
+export interface LinkedTextProps
+  extends Omit<LinkComponentProps, 'ref' | 'href'> {
+  children?: null | string;
+  linkComponent?: FunctionComponent<LinkComponentProps>;
+}
+
+export function LinkedText({
+  children,
+  linkComponent = DefaultLinkComponent,
+  ...props
+}: LinkedTextProps): ReactElement | null {
+  if (!children) {
+    return null;
+  }
+
+  return (
+    <Anchorme {...props} linkComponent={linkComponent}>
+      {children}
+    </Anchorme>
+  );
+}

package/src/multiline-text/MultilineText.stories.tsx

@@ -0,0 +1,30 @@
+import { Meta } from '@storybook/react';
+import { Box } from '../box/Box';
+import { MultilineText } from './MultilineText';
+
+export default {
+  title: 'Lab/MultilineText',
+  component: MultilineText,
+  decorators: [
+    (Story) => (
+      <Box maxWidth="300px">
+        <Story />
+      </Box>
+    ),
+  ],
+} as Meta;
+
+export const basic = () => (
+  <Box>
+    <MultilineText>{`This is a multiline text with a lot of white space.
+
+Lorem     ipsum     dolor      sit   amet, 
+                  consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
+
+Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
+
+
+
+Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.`}</MultilineText>
+  </Box>
+);

package/src/multiline-text/MultilineText.ts

@@ -0,0 +1,16 @@
+import { Property } from 'csstype';
+import styled from 'styled-components';
+
+export interface MultilineTextProps {
+  overflowWrap?: Extract<
+    Property.OverflowWrap,
+    'anywhere' | 'break-word' | 'normal'
+  >;
+}
+
+export const MultilineText = styled.span<MultilineTextProps>`
+  white-space: pre-wrap;
+  overflow-wrap: ${({ overflowWrap = 'normal' }) => overflowWrap};
+`;
+
+MultilineText.displayName = 'MultilineText';

package/src/navbar/Navbar.stories.tsx

@@ -0,0 +1,135 @@
+import {
+  AccountCircle as ProfileIcon,
+  AllInbox,
+  Dashboard,
+  ExitToApp,
+  Notifications,
+  People,
+  Settings,
+} from '@material-ui/icons';
+import { Meta } from '@storybook/react';
+import { noop } from 'lodash';
+import { Box, Navbar, NavbarAvatar, NavbarMenu, TextBox } from '../..';
+
+export default {
+  title: 'Lab/Navbar',
+  component: Navbar,
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta;
+
+const bottomItems = [
+  {
+    value: '/orders',
+    label: 'All Orders',
+    icon: <AllInbox fontSize="small" />,
+    active: true,
+  },
+  {
+    label: 'Customers',
+    value: 'Customers',
+    icon: <People />,
+  },
+  {
+    value: 'profile',
+    label: 'Profile',
+    icon: <ProfileIcon />,
+  },
+];
+
+const menuItems = [
+  {
+    key: 'profile',
+    icon: <ProfileIcon />,
+    label: 'Profile',
+    onClick: noop,
+  },
+  {
+    key: 'notification-settings',
+    icon: <Notifications />,
+    label: 'Notification Settings',
+    onClick: noop,
+  },
+  {
+    key: 'logout',
+    icon: <ExitToApp />,
+    label: 'Log Out',
+    onClick: noop,
+  },
+];
+
+const items = [
+  {
+    icon: <People />,
+    label: 'Customers',
+    groupKey: 1,
+    key: 'Customers',
+  },
+  {
+    icon: <Settings />,
+    label: 'Settings',
+    groupKey: 2,
+    key: 'Settings',
+  },
+  {
+    icon: <Dashboard />,
+    label: 'Dashboard',
+    groupKey: 2,
+    key: 'Dashbaord',
+  },
+  {
+    icon: <AllInbox />,
+    label: 'Orders',
+    groupKey: 3,
+    key: 'Orders',
+    items: [
+      {
+        label: 'Customers',
+        groupKey: 2,
+        key: 'Customers',
+      },
+      {
+        label: 'Settings',
+        groupKey: 2,
+        key: 'Settings',
+        active: true,
+      },
+      {
+        ident: 1,
+        groupKey: 2,
+        label: 'Requests',
+        key: 'Requests',
+      },
+    ],
+  },
+];
+
+export const basic = () => {
+  return (
+    <Box height="100vh">
+      <Navbar
+        items={items}
+        bottomItems={bottomItems}
+        header={
+          <TextBox variant="heading-3" color="white">
+            Super Navbar
+          </TextBox>
+        }
+        footer={
+          <NavbarMenu items={menuItems}>
+            <NavbarAvatar
+              title="John"
+              subtitle="Smith"
+              src="https://images.unsplash.com/photo-1571816119607-57e48af1caa9?q=80&w=256&h=256"
+            >
+              JS
+            </NavbarAvatar>
+          </NavbarMenu>
+        }
+      >
+        Hello
+      </Navbar>
+    </Box>
+  );
+};