@superdispatch/ui-lab 0.50.5 → 0.50.7

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,137 +0,0 @@
-import {
-  AccountCircle as ProfileIcon,
-  AllInbox,
-  Dashboard,
-  ExitToApp,
-  Notifications,
-  People,
-  Settings,
-} from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { Color } from '@superdispatch/ui';
-import { noop } from 'lodash';
-import styled from 'styled-components';
-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',
-      },
-    ],
-  },
-];
-
-const HeaderText = styled(TextBox)`
-  color: ${Color.White};
-`;
-
-export const basic = () => {
-  return (
-    <Box height="100vh">
-      <Navbar
-        items={items}
-        bottomItems={bottomItems}
-        header={<HeaderText variant="heading-3">Super Navbar</HeaderText>}
-        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>
-  );
-};

package/src/navbar/Navbar.tsx

@@ -1,132 +0,0 @@
-import { Drawer, useMediaQuery, useTheme } from '@material-ui/core';
-import { ColorDynamic, useResponsiveValue } from '@superdispatch/ui';
-import {
-  CSSProperties,
-  ReactElement,
-  ReactNode,
-  useCallback,
-  useMemo,
-  useState,
-} from 'react';
-import styled from 'styled-components';
-import { NavbarBottomBar, NavbarBottomBarItem } from './NavbarBottomBar';
-import { NavbarContext, NavbarContextType } from './NavbarContext';
-import { NavbarItemOptions, NavbarList } from './NavbarList';
-
-const Aside = styled.aside`
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-  border-right: 1px solid ${ColorDynamic.Silver400};
-`;
-
-const Main = styled.main`
-  flex: 1;
-  display: flex;
-  flex-direction: column;
-  overflow: auto;
-`;
-
-interface NavbarProps {
-  containerStyle?: CSSProperties;
-  children: ReactNode;
-
-  header?: ReactNode;
-  items: NavbarItemOptions[];
-  bottomItems: NavbarBottomBarItem[];
-  footer?: ReactNode;
-
-  hasExtraBadge?: boolean;
-  isMenuExpanded?: boolean;
-  onMenuExpandedChange?: (isExpanded: boolean) => void;
-}
-
-export function Navbar({
-  footer,
-  items,
-  header,
-  bottomItems,
-  children,
-  containerStyle,
-  hasExtraBadge,
-  isMenuExpanded: controlledIsMenuExpanded,
-  onMenuExpandedChange,
-}: NavbarProps): ReactElement {
-  const theme = useTheme();
-  const [isDrawerOpen, setDrawerOpen] = useState(false);
-
-  const platform = useResponsiveValue('mobile', 'tablet', 'desktop');
-  const isMobile = platform === 'mobile';
-
-  const matches = useMediaQuery(theme.breakpoints.up('md'), { noSsr: true });
-  const [internalIsMenuExpanded, setInternalMenuExpanded] = useState(matches);
-
-  const isMenuExpanded =
-    controlledIsMenuExpanded !== undefined
-      ? controlledIsMenuExpanded
-      : internalIsMenuExpanded;
-
-  const setMenuExpanded = useCallback(
-    (value: boolean): void => {
-      if (controlledIsMenuExpanded === undefined) {
-        setInternalMenuExpanded(value);
-      }
-      onMenuExpandedChange?.(value);
-    },
-    [controlledIsMenuExpanded, onMenuExpandedChange],
-  );
-
-  const hasBadge = hasExtraBadge || items.some((item) => item.badge);
-
-  const ctx = useMemo<NavbarContextType>(
-    () => ({
-      isDrawerOpen,
-      isMenuExpanded,
-      setDrawerOpen,
-      setMenuExpanded,
-      isNavbarExpanded: isMenuExpanded || isDrawerOpen,
-    }),
-    [isDrawerOpen, isMenuExpanded, setDrawerOpen, setMenuExpanded],
-  );
-
-  return (
-    <NavbarContext.Provider value={ctx}>
-      <div
-        style={{
-          display: 'flex',
-          height: '100%',
-          flexDirection: isMobile ? 'column' : 'row',
-          ...containerStyle,
-        }}
-      >
-        {!isMobile && (
-          <Aside>
-            <NavbarList header={header} items={items} footer={footer} />
-          </Aside>
-        )}
-
-        <Main>{children}</Main>
-
-        {isMobile && (
-          <NavbarBottomBar items={bottomItems} hasMenuBadge={hasBadge} />
-        )}
-
-        <Drawer
-          open={isDrawerOpen}
-          anchor="right"
-          onClose={() => {
-            setDrawerOpen(false);
-          }}
-          PaperProps={{
-            style: {
-              width: '280px',
-              minWidth: '280px',
-            },
-          }}
-        >
-          <NavbarList header={header} items={items} footer={footer} />
-        </Drawer>
-      </div>
-    </NavbarContext.Provider>
-  );
-}

package/src/navbar/NavbarAccordion.tsx

@@ -1,195 +0,0 @@
-import { Accordion, AccordionSummary } from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
-import { Color, ColorDark, ColorDynamic, useUID } from '@superdispatch/ui';
-import {
-  MouseEvent,
-  ReactElement,
-  ReactNode,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import styled from 'styled-components';
-import { useNavbarContext } from './NavbarContext';
-import { NavbarItem } from './NavbarItem';
-import { NavbarItemOptions } from './NavbarList';
-
-export const NavbarAccordionLabel = styled.span`
-  flex-grow: 1;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
-  &[data-expanded='false'] {
-    display: none;
-  }
-`;
-
-const NavbarAccordionRoot = styled(Accordion)`
-  width: 100%;
-  color: #c2c4c9;
-  font-size: 14px;
-  font-weight: 400;
-  line-height: 20px;
-  text-decoration: none;
-  outline: none;
-  cursor: pointer;
-  background-color: ${({ theme }) =>
-    theme.palette.type === 'dark' ? ColorDark.White : Color.Dark500};
-
-  &[aria-current] {
-    background-color: ${Color.White10};
-    color: ${ColorDynamic.White};
-  }
-
-  &.MuiAccordion-root:before {
-    background-color: #1b2638;
-  }
-
-  &.MuiPaper-elevation0 {
-    border: 0px;
-  }
-
-  &[data-gutter] {
-    margin-top: 16px;
-  }
-
-  &[data-gutter].MuiAccordion-root.Mui-expanded {
-    margin-top: 16px;
-  }
-`;
-
-const NavbarAccordionSummary = styled(AccordionSummary)`
-  border-left: 4px solid transparent;
-  padding-left: 20px;
-
-  &.MuiAccordionSummary-root {
-    max-height: 40px;
-    min-height: 40px;
-  }
-
-  &.MuiAccordionSummary-content {
-    align-items: center;
-  }
-
-  &:hover,
-  &[aria-current],
-  &[data-active='true'] {
-    color: ${Color.White};
-    background-color: ${Color.White10};
-    border-left-color: ${ColorDynamic.Blue300};
-  }
-
-  &[data-expanded='false'] {
-    .MuiAccordionSummary-expandIcon {
-      display: none;
-    }
-  }
-`;
-
-const IconWrapper = styled.div`
-  width: 24px;
-  margin-right: 8px;
-
-  & svg {
-    font-size: 24px;
-  }
-`;
-
-export interface NavbarAccordionProps {
-  label: ReactNode;
-  icon?: ReactNode;
-  gutter?: boolean;
-  items: Array<Omit<NavbarItemOptions, 'icon'>>;
-  onClick?: (event: MouseEvent<HTMLDivElement>) => void;
-  isExpanded?: boolean;
-  onExpandedChange?: (isExpanded: boolean) => void;
-}
-
-export function NavbarAccordion({
-  label,
-  icon,
-  gutter,
-  items,
-  onClick,
-  isExpanded: controlledIsExpanded,
-  onExpandedChange,
-}: NavbarAccordionProps): ReactElement {
-  const uid = useUID();
-  const { setDrawerOpen, isNavbarExpanded } = useNavbarContext();
-
-  const [internalIsExpanded, setInternalExpanded] = useState(true);
-
-  useEffect(() => {
-    if (controlledIsExpanded === undefined) {
-      setInternalExpanded(isNavbarExpanded);
-    }
-  }, [isNavbarExpanded, controlledIsExpanded]);
-
-  const isExpanded =
-    controlledIsExpanded !== undefined
-      ? controlledIsExpanded
-      : internalIsExpanded;
-
-  function setExpanded(value: boolean): void {
-    if (controlledIsExpanded === undefined) {
-      setInternalExpanded(value);
-    }
-    onExpandedChange?.(value);
-  }
-
-  const filteredItems: Array<Omit<NavbarItemOptions, 'icon'>> = useMemo(
-    () => items.filter((item) => !item.hide),
-    [items],
-  );
-
-  return (
-    <NavbarAccordionRoot
-      square={true}
-      data-gutter={!gutter}
-      aria-labelledby={uid}
-      expanded={isExpanded}
-      onClick={(event) => {
-        onClick?.(event);
-
-        if (controlledIsExpanded !== undefined || isNavbarExpanded) {
-          setExpanded(!isExpanded);
-        }
-      }}
-    >
-      <NavbarAccordionSummary
-        data-active={!isExpanded && items.some((item) => item.active)}
-        data-expanded={isNavbarExpanded}
-        expandIcon={<ExpandMore />}
-      >
-        <IconWrapper>{icon}</IconWrapper>
-        <NavbarAccordionLabel id={uid} data-expanded={isNavbarExpanded}>
-          {label}
-        </NavbarAccordionLabel>
-      </NavbarAccordionSummary>
-
-      {filteredItems.map((item) => {
-        const index = filteredItems.indexOf(item);
-        const prev = filteredItems[index - 1];
-        const { ident = 0 } = item;
-
-        return (
-          <NavbarItem
-            {...item}
-            key={item.key}
-            ident={ident}
-            active={item.active}
-            gutter={prev && prev.groupKey !== item.groupKey}
-            onClick={(event) => {
-              event.stopPropagation();
-              item.onClick?.(event);
-
-              if (!event.isDefaultPrevented()) {
-                setDrawerOpen(false);
-              }
-            }}
-          />
-        );
-      })}
-    </NavbarAccordionRoot>
-  );
-}

package/src/navbar/NavbarAvatar.tsx

@@ -1,51 +0,0 @@
-import { Avatar, AvatarProps, Typography } from '@material-ui/core';
-import { Color, Column, Columns, Stack } from '@superdispatch/ui';
-import { ReactElement, ReactNode } from 'react';
-import styled from 'styled-components';
-import { useNavbarContext } from './NavbarContext';
-
-const StyledTypography = styled(Typography)`
-  color: ${Color.White};
-  text-overflow: ellipsis;
-  white-space: nowrap;
-  overflow: hidden;
-
-  &:hover {
-    color: ${Color.White};
-  }
-`;
-
-interface NavbarAvatarProps extends Omit<AvatarProps, 'title'> {
-  title: ReactNode;
-  subtitle: ReactNode;
-  children: ReactNode;
-}
-
-export function NavbarAvatar({
-  title,
-  subtitle,
-  children,
-  ...props
-}: NavbarAvatarProps): ReactElement {
-  const { isNavbarExpanded } = useNavbarContext();
-
-  if (!isNavbarExpanded) {
-    return <Avatar {...props}>{children}</Avatar>;
-  }
-
-  return (
-    <Columns space="xsmall" align="center">
-      <Column width="content">
-        <Avatar {...props}>{children}</Avatar>
-      </Column>
-
-      <Column>
-        <Stack space="none">
-          <StyledTypography variant="caption">{title}</StyledTypography>
-
-          <StyledTypography variant="caption">{subtitle}</StyledTypography>
-        </Stack>
-      </Column>
-    </Columns>
-  );
-}