@superdispatch/ui-lab 0.50.5 → 0.50.6

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Super Dispatch
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/package.json

@@ -1,22 +1,21 @@
 {
   "name": "@superdispatch/ui-lab",
-  "version": "0.50.5",
+  "version": "0.50.6",
+  "license": "MIT",
+  "files": [
+    "dist-*/**",
+    "bin/"
+  ],
+  "pika": true,
+  "sideEffects": false,
   "repository": {
     "type": "git",
     "url": "https://github.com/superdispatch/ui.git"
   },
-  "license": "MIT",
-  "main": "src/index.ts",
-  "module": "src/index.ts",
-  "browser": "pkg/dist-web/index.js",
-  "types": "src/index.ts",
-  "scripts": {
-    "version": "pika build"
-  },
   "dependencies": {
-    "@superdispatch/dates": "^0.50.3",
+    "@superdispatch/dates": "^0.50.6",
     "@superdispatch/hooks": "^0.50.0",
-    "@superdispatch/ui": "^0.50.3",
+    "@superdispatch/ui": "^0.50.6",
     "react-anchorme": "^3.0.0",
     "react-dropzone": "^11.3.4"
   },
@@ -35,32 +34,8 @@
     "access": "public",
     "directory": "pkg"
   },
-  "@pika/pack": {
-    "pipeline": [
-      [
-        "@pika/plugin-standard-pkg",
-        {
-          "exclude": [
-            "**/*.spec.*",
-            "**/*.stories.*",
-            "**/*.playroom.*",
-            "**/__tests__/**",
-            "**/__testutils__/**"
-          ]
-        }
-      ],
-      [
-        "@pika/plugin-build-web"
-      ],
-      [
-        "@pika/plugin-build-node"
-      ],
-      [
-        "@pika/plugin-build-types"
-      ],
-      [
-        "@pika/plugin-bundle-types"
-      ]
-    ]
-  }
+  "esnext": "dist-src/index.js",
+  "module": "dist-web/index.js",
+  "main": "dist-node/index.js",
+  "types": "dist-types/index.d.ts"
 }

package/.babelrc.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const createBabelConfig = require('../../config/createBabelConfig');
-
-module.exports = createBabelConfig();

package/pkg/README.md

@@ -1,10 +0,0 @@
-### `@superdispatch/ui-lab`
-
-[![npm](https://img.shields.io/npm/v/@superdispatch/ui-lab)](https://www.npmjs.com/package/@superdispatch/ui-lab)
-[![npm minzipped size](https://img.shields.io/bundlephobia/minzip/@superdispatch/ui-lab.svg)](https://bundlephobia.com/result?p=@superdispatch/ui-lab)
-
-#### Installation
-
-```bash
-yarn add @superdispatch/ui-lab
-```

package/pkg/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "@superdispatch/ui-lab",
-  "version": "0.50.5",
-  "license": "MIT",
-  "files": [
-    "dist-*/**",
-    "bin/"
-  ],
-  "pika": true,
-  "sideEffects": false,
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/superdispatch/ui.git"
-  },
-  "dependencies": {
-    "@superdispatch/dates": "^0.50.3",
-    "@superdispatch/hooks": "^0.50.0",
-    "@superdispatch/ui": "^0.50.3",
-    "react-anchorme": "^3.0.0",
-    "react-dropzone": "^11.3.4"
-  },
-  "peerDependencies": {
-    "@babel/runtime": "^7.0.0",
-    "@material-ui/core": "^4.7.2",
-    "@material-ui/icons": "^4.5.1",
-    "@material-ui/lab": "^4.0.0-alpha.40",
-    "@mdi/js": "^6.0.0",
-    "luxon": "^3.7.1",
-    "react": "^17.0.2",
-    "react-transition-group": "^4.4.5",
-    "styled-components": "^5.2.1"
-  },
-  "publishConfig": {
-    "access": "public",
-    "directory": "pkg"
-  },
-  "esnext": "dist-src/index.js",
-  "module": "dist-web/index.js",
-  "main": "dist-node/index.js",
-  "types": "dist-types/index.d.ts"
-}

package/playroom.ts

@@ -1,24 +0,0 @@
-export {
-  Alert,
-  Banner,
-  Box,
-  Button,
-  ButtonArea,
-  DescriptionItem,
-  FileDropZone,
-  FileListItem,
-  FlagList,
-  LinkedText,
-  MultilineText,
-  Navbar,
-  NavbarAvatar,
-  NavbarMenu,
-  Sidebar,
-  SidebarContainer,
-  SidebarDivider,
-  SidebarMenuItem,
-  SidebarMenuItemAction,
-  SidebarMenuItemAvatar,
-  SidebarSubheader,
-  TextBox,
-} from './src';

package/src/alert/Alert.stories.tsx

@@ -1,162 +0,0 @@
-import {
-  AddAlertOutlined,
-  OutlinedFlag,
-  SecurityRounded,
-  WarningRounded,
-} from '@material-ui/icons';
-import { Meta } from '@storybook/react';
-import { Column, Columns, Inline, Stack } from '@superdispatch/ui';
-import { Button } from '../button/Button';
-import { Alert } from './Alert';
-
-export default {
-  title: 'Lab/Alert',
-  component: Alert,
-} as Meta;
-
-export const basic = () => (
-  <Columns collapseBelow="tablet" space="xsmall">
-    <Column>
-      <Stack>
-        <Alert severity="positive">
-          <Inline verticalAlign="center">
-            <span>This is a success alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="info">
-          <Inline verticalAlign="center">
-            <span>This is an info alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="caution">
-          <Inline verticalAlign="center">
-            <span>This is a warning alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="critical">
-          <Inline verticalAlign="center">
-            <span>This is an error alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-      </Stack>
-    </Column>
-
-    <Column>
-      <Stack>
-        <Alert severity="positive">
-          <Inline verticalAlign="center">
-            <span>
-              Uh-Oh! Your Super Carrier documents need review. please submit the
-              following documents. Don’t worry! Be happy!
-            </span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="info">
-          <Inline verticalAlign="center">
-            <span>
-              Uh-Oh! Your Super Carrier documents need review. please submit the
-              following documents. Don’t worry! Be happy!
-            </span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="caution">
-          <Inline verticalAlign="center">
-            <span>
-              Uh-Oh! Your Super Carrier documents need review. please submit the
-              following documents. Don’t worry! Be happy!
-            </span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert severity="critical">
-          <Inline verticalAlign="center">
-            <span>
-              Uh-Oh! Your Super Carrier documents need review. please submit the
-              following documents. Don’t worry! Be happy!
-            </span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-      </Stack>
-    </Column>
-
-    <Column>
-      <Stack>
-        <Alert icon={<OutlinedFlag />} severity="positive">
-          <Inline verticalAlign="center">
-            <span>This is a success alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert icon={<SecurityRounded />} severity="info">
-          <Inline verticalAlign="center">
-            <span>This is an info alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert icon={<WarningRounded />} severity="caution">
-          <Inline verticalAlign="center">
-            <span>This is a warning alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert icon={<AddAlertOutlined />} severity="critical">
-          <Inline verticalAlign="center">
-            <span>This is an error alert — check it out!</span>
-            <Button variant="neutral" size="small">
-              Button
-            </Button>
-          </Inline>
-        </Alert>
-
-        <Alert
-          severity="info"
-          onClose={() => {
-            return null;
-          }}
-        >
-          <Inline verticalAlign="center">
-            <span>This is an alert with close icon — check it out!</span>
-          </Inline>
-        </Alert>
-      </Stack>
-    </Column>
-  </Columns>
-);

package/src/alert/Alert.tsx

@@ -1,135 +0,0 @@
-import { CheckCircle, Error, Info, WarningRounded } from '@material-ui/icons';
-import {
-  Alert as MaterialAlert,
-  AlertProps as MaterialAlertProps,
-} from '@material-ui/lab';
-import { ColorDynamic } from '@superdispatch/ui';
-import { forwardRef, ReactNode } from 'react';
-import styled, { css, SimpleInterpolation } from 'styled-components';
-
-function colorMixin(
-  textColor: ColorDynamic,
-  iconColor: ColorDynamic,
-  backgroundColor: ColorDynamic,
-  buttonHoverColor: ColorDynamic,
-): readonly SimpleInterpolation[] {
-  return css`
-    color: ${textColor};
-    border-color: ${textColor};
-    background-color: ${backgroundColor};
-
-    & .MuiAlert-icon {
-      color: ${iconColor};
-    }
-
-    & .MuiAlert-action {
-      color: ${iconColor};
-
-      & .MuiIconButton-root {
-        &:hover,
-        &:active {
-          color: ${buttonHoverColor};
-        }
-      }
-    }
-  `;
-}
-
-const StyledAlert = styled(MaterialAlert)`
-  &.MuiAlert-outlinedSuccess {
-    ${colorMixin(
-      ColorDynamic.Green500,
-      ColorDynamic.Green300,
-      ColorDynamic.Green50,
-      ColorDynamic.Green400,
-    )};
-  }
-
-  &.MuiAlert-outlinedInfo {
-    ${colorMixin(
-      ColorDynamic.Blue500,
-      ColorDynamic.Blue300,
-      ColorDynamic.Blue50,
-      ColorDynamic.Blue400,
-    )};
-  }
-
-  &.MuiAlert-outlinedWarning {
-    ${colorMixin(
-      ColorDynamic.Yellow500,
-      ColorDynamic.Yellow300,
-      ColorDynamic.Yellow50,
-      ColorDynamic.Yellow400,
-    )};
-  }
-
-  &.MuiAlert-outlinedError {
-    ${colorMixin(
-      ColorDynamic.Red500,
-      ColorDynamic.Red300,
-      ColorDynamic.Red50,
-      ColorDynamic.Red400,
-    )};
-  }
-
-  & .MuiAlert-icon {
-    opacity: 1;
-    padding: 8px 0;
-    font-size: 24px;
-  }
-
-  & .MuiAlert-action {
-    display: block;
-    padding-top: 5px;
-    margin-right: -3px;
-
-    & .MuiIconButton-root {
-      & .MuiSvgIcon-root {
-        font-size: 24px;
-      }
-    }
-  }
-`;
-
-export type AlertSeverityProp = 'positive' | 'info' | 'caution' | 'critical';
-
-export interface AlertProps {
-  onClose?: () => void;
-  children?: ReactNode;
-  icon?: ReactNode;
-  severity?: AlertSeverityProp;
-}
-
-function toMaterialSeverity(
-  severity: AlertSeverityProp,
-): MaterialAlertProps['severity'] {
-  return severity === 'info'
-    ? 'info'
-    : severity === 'caution'
-    ? 'warning'
-    : severity === 'critical'
-    ? 'error'
-    : 'success';
-}
-
-const iconMapping: MaterialAlertProps['iconMapping'] = {
-  success: <CheckCircle />,
-  info: <Info />,
-  error: <Error />,
-  warning: <WarningRounded />,
-};
-
-export const Alert = forwardRef<HTMLDivElement, AlertProps>(
-  ({ children, onClose, severity = 'positive', icon }, ref) => (
-    <StyledAlert
-      ref={ref}
-      variant="outlined"
-      icon={icon}
-      iconMapping={iconMapping}
-      severity={toMaterialSeverity(severity)}
-      onClose={onClose}
-    >
-      {children}
-    </StyledAlert>
-  ),
-);

package/src/banner/Banner.stories.tsx

@@ -1,64 +0,0 @@
-import { Link } from '@material-ui/core';
-import { Meta } from '@storybook/react';
-import { Inline, Stack } from '@superdispatch/ui';
-import { UseState } from '@superdispatch/ui-docs';
-import { Button } from '../button/Button';
-import { TextBox } from '../text-box/TextBox';
-import { Banner } from './Banner';
-
-export default {
-  title: 'Lab/Banner',
-  component: Banner,
-} as Meta;
-
-export const basic = () => (
-  <Stack>
-    <UseState initialState={true}>
-      {(open, setOpen) => (
-        <Stack space="none">
-          <Button
-            size="small"
-            variant="neutral"
-            aria-label="Rate Button"
-            onClick={() => {
-              setOpen(!open);
-            }}
-          >
-            {open ? 'Close' : 'Open'}
-          </Button>
-
-          <Banner
-            in={open}
-            border="top"
-            mountOnEnter={true}
-            unmountOnExit={true}
-          >
-            <Inline
-              verticalAlign="center"
-              horizontalAlign="center"
-              space="small"
-            >
-              <Inline
-                space="xxsmall"
-                verticalAlign="center"
-                horizontalAlign="center"
-              >
-                <TextBox color="inherit">
-                  Rate your recent experience with{' '}
-                </TextBox>
-                <Link
-                  color="inherit"
-                  target="_blank"
-                  rel="noreferrer"
-                  href="https://superdispatch.com/"
-                >
-                  SuperDispatch
-                </Link>
-              </Inline>
-            </Inline>
-          </Banner>
-        </Stack>
-      )}
-    </UseState>
-  </Stack>
-);

package/src/banner/Banner.tsx

@@ -1,120 +0,0 @@
-import { ColorDynamic } from '@superdispatch/ui';
-import { forwardRef, useEffect, useState } from 'react';
-import { CSSTransition } from 'react-transition-group';
-// eslint-disable-next-line import/no-internal-modules
-import { CSSTransitionProps } from 'react-transition-group/CSSTransition';
-import styled, {
-  css,
-  Keyframes,
-  keyframes,
-  SimpleInterpolation,
-} from 'styled-components';
-
-function enterMixin(border: BorderPlacement): readonly SimpleInterpolation[] {
-  return css`
-  min-height: 56px;
-  color: ${ColorDynamic.Dark500};
-  background-color: ${ColorDynamic.White};
-
-  border-${border}: 1px #dfe3e8 solid;
-`;
-}
-
-function enterAnimation(border: BorderPlacement): Keyframes {
-  return keyframes`
-    0% { 
-      min-height: 0; 
-      color: ${ColorDynamic.White};  
-      background-color: ${ColorDynamic.Dark500};
-    }
-  
-    50% { 
-      min-height: 56px; 
-      color: ${ColorDynamic.White};
-      background-color: ${ColorDynamic.Dark500};
-    } 
-  
-    70% { 
-      min-height: 56px; 
-      color: ${ColorDynamic.White};
-      background-color: ${ColorDynamic.Dark500};
-    } 
-  
-    100% {
-      ${enterMixin(border)}
-    } 
-`;
-}
-
-type BorderPlacement = 'top' | 'bottom';
-
-type CustomerTransitionProps = CSSTransitionProps<HTMLDivElement> & {
-  className?: string;
-  border?: BorderPlacement;
-};
-
-const CustomTransition = forwardRef<
-  CSSTransition<HTMLDivElement>,
-  CustomerTransitionProps
->(({ children, ...props }, ref) => (
-  <CSSTransition
-    {...props}
-    ref={ref}
-    timeout={3000}
-    classNames={props.className}
-  >
-    <div>{children}</div>
-  </CSSTransition>
-));
-
-const BannerContent = styled(CustomTransition)<CustomerTransitionProps>(
-  ({ border = 'bottom' }) => {
-    return css`
-      height: 0;
-      width: 100%;
-      overflow: hidden;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      color: ${ColorDynamic.White};
-      background-color: ${ColorDynamic.White};
-
-      &-enter-active {
-        animation: ${enterAnimation(border)} 2s 1s forwards;
-      }
-
-      &-enter-done {
-        ${enterMixin(border)};
-      }
-
-      &-exit {
-        ${enterMixin(border)};
-      }
-
-      &-exit-active {
-        min-height: 0;
-        transition: min-height 2s 1s;
-      }
-    `;
-  },
-);
-
-type BannerProps = Omit<
-  CustomerTransitionProps,
-  'timeout' | 'className' | 'classNames'
->;
-
-export const Banner = forwardRef<CSSTransition<HTMLDivElement>, BannerProps>(
-  ({ in: inProp, ...props }, ref) => {
-    const [isIn, setIn] = useState(false);
-
-    // transition is not triggered on initial render with `in: true`
-    useEffect(() => {
-      setIn(!!inProp);
-    }, [inProp]);
-
-    return <BannerContent ref={ref} in={isIn} {...props} />;
-  },
-);

package/src/box/Box.stories.tsx

@@ -1,20 +0,0 @@
-import { Meta } from '@storybook/react';
-import { Box } from './Box';
-
-export default { title: 'Lab/Box', component: Box } as Meta;
-
-export const basic = () => (
-  <Box
-    display="inline-block"
-    borderWidth="small"
-    borderTopRightRadius="small"
-    borderBottomRightRadius="small"
-    borderColor={['Blue200', 'Green200', 'Purple200']}
-    borderLeftWidth="large"
-    borderLeftColor={['Blue300', 'Green300', 'Purple300']}
-    padding={['large', 'medium', 'small']}
-    backgroundColor={['Blue50', 'Green50', 'Purple50']}
-  >
-    Hey
-  </Box>
-);