@storybook/components 6.5.0-alpha.34 → 6.5.0-alpha.39

package/dist/modern/Loader/Loader.js

@@ -1,187 +0,0 @@
-const _excluded = ["progress", "error", "size"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import global from 'global';
-import { transparentize } from 'polished';
-import React, { useEffect, useState } from 'react';
-import { styled, keyframes } from '@storybook/theming';
-import { Icons } from '../icon/icon';
-import { rotate360 } from '../shared/animation';
-const {
-  EventSource,
-  CONFIG_TYPE
-} = global;
-const LoaderWrapper = styled.div(({
-  size = 32
-}) => ({
-  borderRadius: '50%',
-  cursor: 'progress',
-  display: 'inline-block',
-  overflow: 'hidden',
-  position: 'absolute',
-  transition: 'all 200ms ease-out',
-  verticalAlign: 'top',
-  top: '50%',
-  left: '50%',
-  marginTop: -(size / 2),
-  marginLeft: -(size / 2),
-  height: size,
-  width: size,
-  zIndex: 4,
-  borderWidth: 2,
-  borderStyle: 'solid',
-  borderColor: 'rgba(97, 97, 97, 0.29)',
-  borderTopColor: 'rgb(100,100,100)',
-  animation: `${rotate360} 0.7s linear infinite`,
-  mixBlendMode: 'difference'
-}));
-const ProgressWrapper = styled.div({
-  position: 'absolute',
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
-  alignItems: 'center',
-  width: '100%',
-  height: '100%'
-});
-const ProgressTrack = styled.div(({
-  theme
-}) => ({
-  position: 'relative',
-  width: '80%',
-  marginBottom: '0.75rem',
-  maxWidth: 300,
-  height: 5,
-  borderRadius: 5,
-  background: transparentize(0.8, theme.color.secondary),
-  overflow: 'hidden',
-  cursor: 'progress'
-}));
-const ProgressBar = styled.div(({
-  theme
-}) => ({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  height: '100%',
-  background: theme.color.secondary
-}));
-const ProgressMessage = styled.div(({
-  theme
-}) => ({
-  minHeight: '2em',
-  fontSize: `${theme.typography.size.s1}px`,
-  color: theme.barTextColor
-}));
-const ErrorIcon = styled(Icons)(({
-  theme
-}) => ({
-  width: 20,
-  height: 20,
-  marginBottom: '0.5rem',
-  color: theme.color.mediumdark
-}));
-const ellipsis = keyframes`
-  from { content: "..." }
-  33% { content: "." }
-  66% { content: ".." }
-  to { content: "..." }
-`;
-const Ellipsis = styled.span({
-  '&::after': {
-    content: "'...'",
-    animation: `${ellipsis} 1s linear infinite`,
-    animationDelay: '1s',
-    display: 'inline-block',
-    width: '1em',
-    height: 'auto'
-  }
-});
-export const PureLoader = _ref => {
-  let {
-    progress,
-    error,
-    size
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  if (error) {
-    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
-      "aria-label": error.toString(),
-      "aria-live": "polite",
-      role: "status"
-    }, props), /*#__PURE__*/React.createElement(ErrorIcon, {
-      icon: "lightningoff"
-    }), /*#__PURE__*/React.createElement(ProgressMessage, null, error.message));
-  }
-
-  if (progress) {
-    const {
-      value,
-      modules
-    } = progress;
-    let {
-      message
-    } = progress;
-    if (modules) message += ` ${modules.complete} / ${modules.total} modules`;
-    return /*#__PURE__*/React.createElement(ProgressWrapper, _extends({
-      "aria-label": "Content is loading...",
-      "aria-live": "polite",
-      "aria-valuemin": 0,
-      "aria-valuemax": 100,
-      "aria-valuenow": value * 100,
-      "aria-valuetext": message,
-      role: "progressbar"
-    }, props), /*#__PURE__*/React.createElement(ProgressTrack, null, /*#__PURE__*/React.createElement(ProgressBar, {
-      style: {
-        width: `${value * 100}%`
-      }
-    })), /*#__PURE__*/React.createElement(ProgressMessage, null, message, value < 1 && /*#__PURE__*/React.createElement(Ellipsis, {
-      key: message
-    })));
-  }
-
-  return /*#__PURE__*/React.createElement(LoaderWrapper, _extends({
-    "aria-label": "Content is loading...",
-    "aria-live": "polite",
-    role: "status",
-    size: size
-  }, props));
-};
-PureLoader.displayName = "PureLoader";
-export const Loader = props => {
-  const [progress, setProgress] = useState(undefined);
-  const [error, setError] = useState(undefined);
-  useEffect(() => {
-    // Don't listen for progress updates in static builds
-    // Event source is not defined in IE 11
-    if (CONFIG_TYPE !== 'DEVELOPMENT' || !EventSource) return undefined;
-    const eventSource = new EventSource('/progress');
-    let lastProgress;
-
-    eventSource.onmessage = event => {
-      try {
-        lastProgress = JSON.parse(event.data);
-        setProgress(lastProgress);
-      } catch (e) {
-        setError(e);
-        eventSource.close();
-      }
-    };
-
-    eventSource.onerror = () => {
-      if (lastProgress && lastProgress.value !== 1) setError(new Error('Connection closed'));
-      eventSource.close();
-    };
-
-    return () => eventSource.close();
-  }, []);
-  return /*#__PURE__*/React.createElement(PureLoader, _extends({
-    progress: progress,
-    error: error
-  }, props));
-};
-Loader.displayName = "Loader";

package/dist/modern/Loader/Loader.stories.js

@@ -1,53 +0,0 @@
-import React from 'react';
-import { PureLoader as Loader } from './Loader';
-
-const withBackground = storyFn => /*#__PURE__*/React.createElement("div", {
-  style: {
-    position: 'fixed',
-    top: 0,
-    left: 0,
-    width: '100vw',
-    height: '100vh',
-    background: 'linear-gradient(to right, rgba(56,56,56,1) 0%, rgba(0,0,0,1) 50%, rgba(255,255,255,1) 50%, rgba(224,224,224,1) 100%)'
-  }
-}, /*#__PURE__*/React.createElement("span", {
-  style: {
-    position: 'absolute',
-    top: '50%',
-    left: 0,
-    height: '50vh',
-    width: '100vw',
-    background: 'linear-gradient(to right, red 0%, orangered 50%, blue 50%, deepskyblue 100%)'
-  }
-}), storyFn());
-
-withBackground.displayName = "withBackground";
-export default {
-  title: 'Basics/Loader'
-};
-export const InfiniteState = () => /*#__PURE__*/React.createElement(Loader, {
-  role: "progressbar"
-});
-InfiniteState.displayName = "InfiniteState";
-InfiniteState.decorators = [withBackground];
-export const SizeAdjusted = () => /*#__PURE__*/React.createElement(Loader, {
-  size: 64,
-  role: "progressbar"
-});
-SizeAdjusted.displayName = "SizeAdjusted";
-SizeAdjusted.decorators = [withBackground];
-export const ProgressBar = () => /*#__PURE__*/React.createElement(Loader, {
-  progress: {
-    value: 0.3,
-    message: 'Building',
-    modules: {
-      complete: 500,
-      total: 1337
-    }
-  }
-});
-ProgressBar.displayName = "ProgressBar";
-export const ProgressError = () => /*#__PURE__*/React.createElement(Loader, {
-  error: new Error('Connection closed')
-});
-ProgressError.displayName = "ProgressError";

package/dist/modern/ScrollArea/OverlayScrollbars.js

@@ -1,88 +0,0 @@
-const _excluded = ["options", "extensions", "className", "children"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React, { useRef, useEffect } from 'react';
-import OverlayScrollbars from 'overlayscrollbars';
-
-/**
- * Using overlayscrollbars-react component results use the esm modules
- * which doesn't go through babel leading to IE 11 uncompatibility
- * A PR is submitted that may fix this:
- * https://github.com/KingSora/OverlayScrollbars/pull/218
- * */
-export const OverlayScrollbarsComponent = _ref => {
-  let {
-    options = {},
-    extensions,
-    className,
-    children
-  } = _ref,
-      rest = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const osTargetRef = useRef();
-  const osInstance = useRef();
-  useEffect(() => {
-    osInstance.current = OverlayScrollbars(osTargetRef.current, options, extensions);
-    mergeHostClassNames(osInstance.current, className);
-    return () => {
-      if (OverlayScrollbars.valid(osInstance.current)) {
-        osInstance.current.destroy();
-        osInstance.current = null;
-      }
-    };
-  }, []);
-  useEffect(() => {
-    if (OverlayScrollbars.valid(osInstance.current)) {
-      osInstance.current.options(options);
-    }
-  }, [options]);
-  useEffect(() => {
-    if (OverlayScrollbars.valid(osInstance.current)) {
-      mergeHostClassNames(osInstance.current, className);
-    }
-  }, [className]);
-  return /*#__PURE__*/React.createElement("div", _extends({
-    className: "os-host"
-  }, rest, {
-    ref: osTargetRef
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "os-resize-observer-host"
-  }), /*#__PURE__*/React.createElement("div", {
-    className: "os-padding"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-viewport"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-content"
-  }, children))), /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar os-scrollbar-horizontal "
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar-track"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar-handle"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar os-scrollbar-vertical"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar-track"
-  }, /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar-handle"
-  }))), /*#__PURE__*/React.createElement("div", {
-    className: "os-scrollbar-corner"
-  }));
-};
-OverlayScrollbarsComponent.displayName = "OverlayScrollbarsComponent";
-
-function mergeHostClassNames(osInstance, className) {
-  if (OverlayScrollbars.valid(osInstance)) {
-    const {
-      host
-    } = osInstance.getElements();
-    const regex = new RegExp(`(^os-host([-_].+|)$)|${osInstance.options().className.replace(/\s/g, '$|')}$`, 'g');
-    const osClassNames = host.className.split(' ').filter(name => name.match(regex)).join(' ');
-    host.className = `${osClassNames} ${className || ''}`;
-  }
-}
-
-export default OverlayScrollbarsComponent;

package/dist/modern/ScrollArea/ScrollArea.js

@@ -1,45 +0,0 @@
-const _excluded = ["horizontal", "vertical"];
-
-function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
-function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
-
-import React, { lazy, Suspense } from 'react';
-import { styled } from '@storybook/theming';
-const GlobalScrollAreaStyles = /*#__PURE__*/lazy(() => import('./GlobalScrollAreaStyles'));
-const OverlayScrollbars = /*#__PURE__*/lazy(() => import('./OverlayScrollbars'));
-
-const Scroller = _ref => {
-  let props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(Suspense, {
-    fallback: /*#__PURE__*/React.createElement("div", props)
-  }, /*#__PURE__*/React.createElement(GlobalScrollAreaStyles, null), /*#__PURE__*/React.createElement(OverlayScrollbars, _extends({
-    options: {
-      scrollbars: {
-        autoHide: 'leave'
-      }
-    }
-  }, props)));
-};
-
-Scroller.displayName = "Scroller";
-export const ScrollArea = styled(Scroller)(({
-  vertical
-}) => !vertical ? {
-  overflowY: 'hidden'
-} : {
-  overflowY: 'auto',
-  height: '100%'
-}, ({
-  horizontal
-}) => !horizontal ? {
-  overflowX: 'hidden'
-} : {
-  overflowX: 'auto',
-  width: '100%'
-});
-ScrollArea.defaultProps = {
-  horizontal: false,
-  vertical: false
-};

package/dist/modern/ScrollArea/ScrollArea.stories.js

@@ -1,70 +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 => {
-  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 => /*#__PURE__*/React.createElement(Wrapper, null, storyFn())]
-};
-export const Vertical = () => /*#__PURE__*/React.createElement(ScrollArea, {
-  vertical: true
-}, list(i => /*#__PURE__*/React.createElement(Fragment, {
-  key: i
-}, /*#__PURE__*/React.createElement(Block, null, i), /*#__PURE__*/React.createElement("br", null))));
-Vertical.displayName = "Vertical";
-export const Horizontal = () => /*#__PURE__*/React.createElement(ScrollArea, {
-  horizontal: true
-}, list(i => /*#__PURE__*/React.createElement(Block, {
-  key: i
-}, i)));
-Horizontal.displayName = "Horizontal";
-export const Both = () => /*#__PURE__*/React.createElement(ScrollArea, {
-  horizontal: true,
-  vertical: true
-}, list(i => /*#__PURE__*/React.createElement(Fragment, {
-  key: i
-}, list(ii => /*#__PURE__*/React.createElement(Block, {
-  key: ii
-}, ii * i)), /*#__PURE__*/React.createElement("br", null))));
-Both.displayName = "Both";
-export const WithOuterBorder = () => /*#__PURE__*/React.createElement(ScrollArea, {
-  horizontal: true,
-  vertical: true
-}, /*#__PURE__*/React.createElement("div", {
-  style: {
-    width: 2000,
-    height: 2000,
-    border: '10px solid orangered',
-    background: `url('data:image/png;base64,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')`
-  }
-}));
-WithOuterBorder.displayName = "WithOuterBorder";

package/dist/modern/Zoom/Zoom.js

@@ -1,17 +0,0 @@
-import global from 'global';
-import { ZoomElement } from './ZoomElement';
-import { ZoomIFrame } from './ZoomIFrame';
-const {
-  window: globalWindow
-} = global;
-export const browserSupportsCssZoom = () => {
-  try {
-    return globalWindow.document.implementation.createHTMLDocument('').body.style.zoom !== undefined;
-  } catch (error) {
-    return false;
-  }
-};
-export const Zoom = {
-  Element: ZoomElement,
-  IFrame: ZoomIFrame
-};

package/dist/modern/Zoom/Zoom.stories.js

@@ -1,113 +0,0 @@
-import React, { useEffect, useState } from 'react';
-import { Zoom } from './Zoom';
-export default {
-  component: Zoom,
-  title: 'Basics/Zoom',
-  argTypes: {
-    scale: {
-      control: {
-        type: 'range',
-        min: 0.2,
-        max: 30,
-        step: 0.02
-      }
-    }
-  },
-  parameters: {
-    chromatic: {
-      delay: 500,
-      diffThreshold: 0.2
-    }
-  }
-};
-const EXAMPLE_ELEMENT = /*#__PURE__*/React.createElement("div", {
-  style: {
-    width: 2000,
-    height: 2000,
-    border: '10px solid orangered',
-    background: `url('data:image/png;base64,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')`
-  }
-});
-
-const TemplateElement = args => /*#__PURE__*/React.createElement(Zoom.Element, args);
-
-TemplateElement.displayName = "TemplateElement";
-export const ElementActualSize = TemplateElement.bind({});
-ElementActualSize.args = {
-  scale: 1,
-  children: EXAMPLE_ELEMENT
-};
-export const ElementZoomedIn = TemplateElement.bind({});
-ElementZoomedIn.args = {
-  scale: 0.7,
-  children: EXAMPLE_ELEMENT
-};
-export const ElementZoomedOut = TemplateElement.bind({});
-ElementZoomedOut.args = {
-  scale: 3,
-  children: EXAMPLE_ELEMENT
-};
-const style = {
-  width: '500px',
-  height: '500px',
-  border: '2px solid hotpink',
-  position: 'relative'
-};
-
-const TemplateIFrame = args => {
-  const iFrameRef = React.useRef(null);
-  const [scale, setScale] = useState(1);
-  const [loaded, hasLoaded] = useState(false);
-  useEffect(() => {
-    if (loaded) {
-      setScale(args.scale);
-    }
-  }, [args.scale, loaded]);
-  return /*#__PURE__*/React.createElement(Zoom.IFrame, {
-    iFrameRef: iFrameRef,
-    scale: scale,
-    active: args.active
-  }, /*#__PURE__*/React.createElement("iframe", {
-    id: "iframe",
-    title: "UI Panel",
-    onLoad: () => hasLoaded(true),
-    src: "/iframe.html?id=ui-panel--default&viewMode=story",
-    style: style,
-    ref: iFrameRef,
-    allowFullScreen: true
-  }));
-};
-
-TemplateIFrame.displayName = "TemplateIFrame";
-export const IFrameActualSize = TemplateIFrame.bind({});
-IFrameActualSize.args = {
-  scale: 1,
-  active: true
-}; // The iFrame stories are disabled because useGlobals works in practice
-// but, for some reason breaks in the stories for Zoom.iFrame
-
-IFrameActualSize.parameters = {
-  chromatic: {
-    disableSnapshot: true
-  }
-};
-export const IFrameZoomedIn = TemplateIFrame.bind({});
-IFrameZoomedIn.args = {
-  scale: 0.7,
-  active: true
-};
-IFrameZoomedIn.parameters = {
-  chromatic: {
-    disableSnapshot: true
-  }
-};
-export const IFrameZoomedOut = TemplateIFrame.bind({});
-IFrameZoomedOut.args = {
-  scale: 3,
-  active: true
-};
-IFrameZoomedOut.parameters = {
-  chromatic: {
-    disableSnapshot: true
-  }
-};

package/dist/modern/Zoom/ZoomElement.js

@@ -1,35 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import { styled } from '@storybook/theming';
-import { browserSupportsCssZoom } from './browserSupportsCssZoom';
-const ZoomElementWrapper = styled.div(({
-  scale = 1,
-  height
-}) => browserSupportsCssZoom() ? {
-  '> *': {
-    zoom: 1 / scale
-  }
-} : {
-  height: height + 50,
-  transformOrigin: 'top left',
-  transform: `scale(${1 / scale})`
-});
-export function ZoomElement({
-  scale,
-  children
-}) {
-  const componentWrapperRef = useRef(null);
-  const [height, setHeight] = useState(0);
-  useEffect(() => {
-    if (componentWrapperRef.current) {
-      setHeight(componentWrapperRef.current.getBoundingClientRect().height);
-    }
-  }, [scale, componentWrapperRef.current]);
-  return /*#__PURE__*/React.createElement(ZoomElementWrapper, {
-    scale: scale,
-    height: height
-  }, /*#__PURE__*/React.createElement("div", {
-    ref: componentWrapperRef,
-    className: "innerZoomElementWrapper"
-  }, children));
-}
-ZoomElement.displayName = "ZoomElement";