@storybook/components 5.2.1 → 5.2.5

package/src/ScrollArea/ScrollArea.stories.tsx

@@ -1,85 +0,0 @@
-import React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
-import { ScrollArea } from './ScrollArea';
-
-const Block = styled.span({
-  display: 'inline-block',
-  height: 40,
-  width: 40,
-  marginTop: 5,
-  marginRight: 5,
-  background: 'silver',
-  lineHeight: '40px',
-  textAlign: 'center',
-  fontSize: 9,
-});
-
-const Wrapper = styled.div({
-  whiteSpace: 'nowrap',
-  lineHeight: '0px',
-  width: 500,
-  height: 500,
-  overflow: 'hidden',
-});
-
-const list = (filler: (data: number) => JSX.Element) => {
-  const data = [];
-
-  // eslint-disable-next-line no-plusplus
-  for (let i = 0; i < 20; i++) {
-    data.push(filler(i));
-  }
-
-  return data;
-};
-
-export default {
-  component: ScrollArea,
-  title: 'Basics|ScrollArea',
-  decorators: [(storyFn: () => any) => <Wrapper>{storyFn()}</Wrapper>],
-};
-
-export const vertical = () => (
-  <ScrollArea vertical>
-    {list(i => (
-      <Fragment key={i}>
-        <Block>{i}</Block>
-        <br />
-      </Fragment>
-    ))}
-  </ScrollArea>
-);
-
-export const horizontal = () => (
-  <ScrollArea horizontal>
-    {list(i => (
-      <Block key={i}>{i}</Block>
-    ))}
-  </ScrollArea>
-);
-
-export const both = () => (
-  <ScrollArea horizontal vertical>
-    {list(i => (
-      <Fragment key={i}>
-        {list(ii => (
-          <Block key={ii}>{ii * i}</Block>
-        ))}
-        <br />
-      </Fragment>
-    ))}
-  </ScrollArea>
-);
-
-export const withOuterBorder = () => (
-  <ScrollArea horizontal vertical>
-    <div
-      style={{
-        width: 2000,
-        height: 2000,
-        border: '10px solid orangered',
-        background: `url('data:image/png;base64,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')`,
-      }}
-    />
-  </ScrollArea>
-);

package/src/ScrollArea/ScrollArea.tsx

@@ -1,62 +0,0 @@
-// Storybook's implementation of SimpleBar https://github.com/Grsmto/simplebar
-// Note: "SimpleBar can't be used on the <body>, <textarea> or <iframe> elements."
-
-import React, { Fragment, FunctionComponent } from 'react';
-import { styled, Global } from '@storybook/theming';
-
-import SimpleBar from 'simplebar-react';
-import { getScrollAreaStyles } from './ScrollAreaStyles';
-
-export interface ScrollProps {
-  horizontal?: boolean;
-  vertical?: boolean;
-  [key: string]: any;
-}
-
-const Scroll = styled(({ vertical, horizontal, ...rest }: ScrollProps) => <SimpleBar {...rest} />)<
-  ScrollProps
->(
-  ({ vertical }) =>
-    !vertical
-      ? {
-          overflowY: 'hidden',
-        }
-      : {
-          overflowY: 'auto',
-          height: '100%',
-        },
-  ({ horizontal }) =>
-    !horizontal
-      ? {
-          overflowX: 'hidden',
-        }
-      : {
-          overflowX: 'auto',
-          width: '100%',
-        }
-);
-
-export interface ScrollAreaProps {
-  horizontal?: boolean;
-  vertical?: boolean;
-  className?: string;
-}
-
-export const ScrollArea: FunctionComponent<ScrollAreaProps> = ({
-  children,
-  vertical,
-  horizontal,
-  ...props
-}) => (
-  <Fragment>
-    <Global styles={getScrollAreaStyles} />
-    <Scroll vertical={vertical} horizontal={horizontal} {...props}>
-      {children}
-    </Scroll>
-  </Fragment>
-);
-
-ScrollArea.defaultProps = {
-  horizontal: false,
-  vertical: false,
-};

package/src/ScrollArea/ScrollAreaStyles.tsx

@@ -1,166 +0,0 @@
-import { Theme, Interpolation } from '@storybook/theming';
-
-export const getScrollAreaStyles: (theme: Theme) => Interpolation = (theme: Theme) => ({
-  '[data-simplebar]': {
-    position: 'relative',
-    flexDirection: 'column',
-    flexWrap: 'wrap',
-    justifyContent: 'flex-start',
-    alignContent: 'flex-start',
-    alignItems: 'flex-start',
-  },
-
-  '.simplebar-wrapper': {
-    overflow: 'hidden',
-    width: 'inherit',
-    height: 'inherit',
-    maxWidth: 'inherit',
-    maxHeight: 'inherit',
-  },
-
-  '.simplebar-mask': {
-    direction: 'inherit',
-    position: 'absolute',
-    overflow: 'hidden',
-    padding: 0,
-    margin: 0,
-    left: 0,
-    top: 0,
-    bottom: 0,
-    right: 0,
-    width: 'auto !important',
-    height: 'auto !important',
-    zIndex: 0,
-  },
-
-  '.simplebar-offset': {
-    direction: 'inherit !important' as 'inherit',
-    resize: 'none !important' as 'none',
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    bottom: 0,
-    right: 0,
-    padding: 0,
-    margin: 0,
-    WebkitOverflowScrolling: 'touch',
-  },
-
-  '.simplebar-content-wrapper': {
-    direction: 'inherit',
-    position: 'relative',
-    display: 'block',
-    visibility: 'visible',
-  },
-
-  '.simplebar-placeholder': {
-    maxHeight: '100%',
-    maxWidth: '100%',
-    width: '100%',
-    pointerEvents: 'none',
-  },
-
-  '.simplebar-height-auto-observer-wrapper': {
-    height: '100%',
-    width: 'inherit',
-    maxWidth: 1,
-    position: 'relative',
-    float: 'left',
-    maxHeight: 1,
-    overflow: 'hidden',
-    zIndex: -1,
-    padding: 0,
-    margin: 0,
-    pointerEvents: 'none',
-    flexGrow: 'inherit',
-    flexShrink: 0,
-    flexBasis: 0,
-  },
-
-  '.simplebar-height-auto-observer': {
-    display: 'block',
-    opacity: 0,
-    position: 'absolute',
-    top: 0,
-    left: 0,
-    height: '1000%',
-    width: '1000%',
-    minHeight: 1,
-    minWidth: 1,
-    overflow: 'hidden',
-    pointerEvents: 'none',
-    zIndex: -1,
-  },
-
-  '.simplebar-track': {
-    zIndex: 1,
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
-    pointerEvents: 'none',
-    overflow: 'hidden',
-  },
-
-  '[data-simplebar].simplebar-dragging .simplebar-track': {
-    pointerEvents: 'all',
-  },
-
-  '.simplebar-scrollbar': {
-    position: 'absolute',
-    right: 2,
-    width: 7,
-    minHeight: 10,
-  },
-
-  '.simplebar-scrollbar:before': {
-    position: 'absolute',
-    content: '""',
-    borderRadius: 7,
-    left: 0,
-    right: 0,
-    opacity: 0,
-    transition: 'opacity 0.2s linear',
-    background: theme.base === 'light' ? theme.color.darkest : theme.color.lightest,
-  },
-
-  '.simplebar-track .simplebar-scrollbar.simplebar-visible:before': {
-    opacity: 0.5,
-    transition: 'opacity 0s linear',
-  },
-
-  '.simplebar-track.simplebar-vertical': {
-    top: 0,
-    width: 11,
-  },
-
-  '.simplebar-track.simplebar-vertical .simplebar-scrollbar:before': {
-    top: 2,
-    bottom: 2,
-  },
-
-  '.simplebar-track.simplebar-horizontal': {
-    left: 0,
-    height: 11,
-  },
-
-  '.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before': {
-    height: '100%',
-    left: 2,
-    right: 2,
-  },
-
-  '.simplebar-track.simplebar-horizontal .simplebar-scrollbar': {
-    right: 'auto',
-    left: 0,
-    top: 2,
-    height: 7,
-    minHeight: 0,
-    minWidth: 10,
-    width: 'auto',
-  },
-
-  '[data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical': {
-    right: 'auto',
-    left: 0,
-  },
-});

package/src/addon-panel/addon-panel.tsx

@@ -1,33 +0,0 @@
-import React, { useRef, useEffect, ReactNode } from 'react';
-
-const usePrevious = (value: any) => {
-  const ref = useRef();
-
-  useEffect(() => {
-    // happens after return
-    ref.current = value;
-  }, [value]);
-
-  return ref.current;
-};
-
-const useUpdate = (update: boolean, value: any) => {
-  const previousValue = usePrevious(value);
-
-  return update ? value : previousValue;
-};
-
-export interface AddonPanelProps {
-  active: boolean;
-  children: ReactNode;
-}
-
-export const AddonPanel = ({ active, children }: AddonPanelProps) => {
-  return (
-    // the transform is to prevent a bug where the content would be invisible
-    // the hidden attribute is an valid html element that's both accessible and works to visually hide content
-    <div hidden={!active} style={{ transform: 'translateX(0px)' }}>
-      {useUpdate(active, children)}
-    </div>
-  );
-};

package/src/bar/bar.tsx

@@ -1,93 +0,0 @@
-import React, { Children, FunctionComponent } from 'react';
-import { styled } from '@storybook/theming';
-
-import { ScrollArea } from '../ScrollArea/ScrollArea';
-
-export interface SideProps {
-  left?: boolean;
-  right?: boolean;
-}
-
-const Side = styled.div<SideProps>(
-  {
-    display: 'flex',
-    whiteSpace: 'nowrap',
-    flexBasis: 'auto',
-    flexShrink: 0,
-  },
-  ({ left }) =>
-    left
-      ? {
-          '& > *': {
-            marginLeft: 15,
-          },
-        }
-      : {},
-  ({ right }) =>
-    right
-      ? {
-          marginLeft: 30,
-          '& > *': {
-            marginRight: 15,
-          },
-        }
-      : {}
-);
-Side.displayName = 'Side';
-
-export const Bar = styled(({ children, className }) => (
-  <ScrollArea horizontal className={className}>
-    {children}
-  </ScrollArea>
-))(
-  ({ theme }) => ({
-    color: theme.barTextColor,
-    width: '100%',
-    height: 40,
-    flexShrink: 0,
-  }),
-
-  ({ theme, border }) =>
-    border
-      ? {
-          boxShadow: `${theme.appBorderColor}  0 -1px 0 0 inset`,
-          background: theme.barBg,
-        }
-      : {}
-);
-Bar.displayName = 'Bar';
-
-const BarInner = styled.div<{ bgColor: string }>(({ bgColor }) => ({
-  display: 'flex',
-  justifyContent: 'space-between',
-  position: 'relative',
-  flexWrap: 'nowrap',
-  flexShrink: 0,
-  height: 40,
-  backgroundColor: bgColor || '',
-}));
-
-export interface FlexBarProps {
-  border?: boolean;
-  children?: any;
-  backgroundColor?: string;
-}
-
-export const FlexBar: FunctionComponent<FlexBarProps> = ({
-  children,
-  backgroundColor,
-  ...rest
-}) => {
-  const [left, right] = Children.toArray(children);
-  return (
-    <div>
-      <Bar {...rest}>
-        <BarInner bgColor={backgroundColor}>
-          <Side left>{left}</Side>
-          {right ? <Side right>{right}</Side> : null}
-        </BarInner>
-      </Bar>
-    </div>
-  );
-};
-FlexBar.displayName = 'FlexBar';

package/src/bar/button.ts

@@ -1,89 +0,0 @@
-import { styled } from '@storybook/theming';
-
-export interface TabButtonProps {
-  active?: boolean;
-  textColor?: string;
-}
-
-export const TabButton = styled.button<TabButtonProps>(
-  {
-    whiteSpace: 'normal',
-    display: 'inline-flex',
-    overflow: 'hidden',
-    verticalAlign: 'top',
-    justifyContent: 'center',
-    alignItems: 'center',
-    textAlign: 'center',
-    textDecoration: 'none',
-
-    '&:empty': {
-      display: 'none',
-    },
-  },
-  ({ theme }) => ({
-    padding: '0 15px',
-    textTransform: 'capitalize',
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-    height: 40,
-    lineHeight: '12px',
-    cursor: 'pointer',
-    background: 'transparent',
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-    fontWeight: 'bold',
-    fontSize: 13,
-
-    '&:focus': {
-      outline: '0 none',
-      borderBottomColor: theme.color.secondary,
-    },
-  }),
-  ({ active, textColor, theme }) =>
-    active
-      ? {
-          color: textColor || theme.barSelectedColor,
-          borderBottomColor: theme.barSelectedColor,
-        }
-      : {
-          color: textColor || 'inherit',
-          borderBottomColor: 'transparent',
-        }
-);
-TabButton.displayName = 'TabButton';
-
-export interface IconButtonProps {
-  active?: boolean;
-}
-
-export const IconButton = styled.button<IconButtonProps>(
-  ({ theme }) => ({
-    height: 40,
-    background: 'none',
-    color: 'inherit',
-    padding: 0,
-    cursor: 'pointer',
-
-    border: '0 solid transparent',
-    borderTop: '3px solid transparent',
-    borderBottom: '3px solid transparent',
-
-    transition: 'color 0.2s linear, border-bottom-color 0.2s linear',
-
-    '&:hover, &:focus': {
-      outline: '0 none',
-      color: theme.color.secondary,
-    },
-    '& > svg': {
-      width: 15,
-    },
-  }),
-  ({ active, theme }) =>
-    active
-      ? {
-          outline: '0 none',
-          borderBottomColor: theme.color.secondary,
-        }
-      : {}
-);
-IconButton.displayName = 'IconButton';

package/src/bar/separator.tsx

@@ -1,39 +0,0 @@
-import React, { Fragment } from 'react';
-import { styled } from '@storybook/theming';
-
-export const Separator = styled.span<SeparatorProps>(
-  ({ theme }) => ({
-    width: 1,
-    height: 24,
-    background: theme.appBorderColor,
-    marginTop: 8,
-  }),
-  ({ force }) =>
-    force
-      ? {}
-      : {
-          '& + &': {
-            display: 'none',
-          },
-        }
-);
-Separator.displayName = 'Separator';
-
-export const interleaveSeparators = (list: any[]) =>
-  list.reduce(
-    (acc, item, index) =>
-      item ? (
-        <Fragment key={item.id || item.key || `f-${index}`}>
-          {acc}
-          {/* eslint-disable-next-line react/no-array-index-key */}
-          {index > 0 ? <Separator key={`s-${index}`} /> : null}
-          {item.render() || item}
-        </Fragment>
-      ) : (
-        acc
-      ),
-    null
-  );
-export interface SeparatorProps {
-  force?: boolean;
-}

package/src/blocks/BlockBackgroundStyles.tsx

@@ -1,9 +0,0 @@
-import { Theme } from '@storybook/theming';
-
-export const getBlockBackgroundStyle: (theme: Theme) => object = (theme: Theme) => ({
-  borderRadius: theme.appBorderRadius,
-  background: theme.background.content,
-  boxShadow:
-    theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-  border: `1px solid ${theme.appBorderColor}`,
-});

package/src/blocks/ColorPalette.stories.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import { ColorItem, ColorPalette } from './ColorPalette';
-
-export default {
-  title: 'Docs|ColorPalette',
-  component: ColorPalette,
-};
-
-export const defaultStyle = () => (
-  <ColorPalette>
-    <ColorItem
-      title="theme.color.greyscale"
-      subtitle="Some of the greys"
-      colors={['#FFFFFF', '#F8F8F8', '#F3F3F3']}
-    />
-    <ColorItem title="theme.color.primary" subtitle="Coral" colors={['#FF4785']} />
-    <ColorItem title="theme.color.secondary" subtitle="Ocean" colors={['#1EA7FD']} />
-    <ColorItem
-      title="theme.color.positive"
-      subtitle="Green"
-      colors={[
-        'rgba(102,191,60,1)',
-        'rgba(102,191,60,.8)',
-        'rgba(102,191,60,.6)',
-        'rgba(102,191,60,.3)',
-      ]}
-    />
-  </ColorPalette>
-);