@superdispatch/ui-lab 0.21.13 → 0.21.15

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

@@ -1,339 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,28 +0,0 @@
-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

@@ -1,42 +0,0 @@
-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

@@ -1,47 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,135 +0,0 @@
-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>
-  );
-};