@superdispatch/ui-lab 0.50.3 → 0.50.5

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,137 @@
+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

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

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

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