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

package/dist/modern/blocks/IconGallery.js

@@ -1,70 +0,0 @@
-const _excluded = ["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 from 'react';
-import { styled } from '@storybook/theming';
-import { ResetWrapper } from '../typography/ResetWrapper';
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-const ItemLabel = styled.div(({
-  theme
-}) => ({
-  fontFamily: theme.typography.fonts.base,
-  fontSize: theme.typography.size.s2,
-  color: theme.color.defaultText,
-  marginLeft: 10,
-  lineHeight: 1.2
-}));
-const ItemSpecimen = styled.div(({
-  theme
-}) => Object.assign({}, getBlockBackgroundStyle(theme), {
-  overflow: 'hidden',
-  height: 40,
-  width: 40,
-  display: 'flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  flex: 'none',
-  '> img, > svg': {
-    width: 20,
-    height: 20
-  }
-}));
-const Item = styled.div({
-  display: 'inline-flex',
-  flexDirection: 'row',
-  alignItems: 'center',
-  flex: '0 1 calc(20% - 10px)',
-  minWidth: 120,
-  margin: '0px 10px 30px 0'
-});
-const List = styled.div({
-  display: 'flex',
-  flexFlow: 'row wrap'
-});
-
-/**
- * An individual icon with a caption and an example (passed as `children`).
- */
-export const IconItem = ({
-  name,
-  children
-}) => /*#__PURE__*/React.createElement(Item, null, /*#__PURE__*/React.createElement(ItemSpecimen, null, children), /*#__PURE__*/React.createElement(ItemLabel, null, name));
-IconItem.displayName = "IconItem";
-
-/**
- * Show a grid of icons, as specified by `IconItem`.
- */
-export const IconGallery = _ref => {
-  let {
-    children
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  return /*#__PURE__*/React.createElement(ResetWrapper, null, /*#__PURE__*/React.createElement(List, _extends({}, props, {
-    className: "docblock-icongallery"
-  }), children));
-};
-IconGallery.displayName = "IconGallery";

package/dist/modern/blocks/IconGallery.stories.js

@@ -1,35 +0,0 @@
-import React from 'react';
-import { IconItem, IconGallery } from './IconGallery';
-import { Icons as ExampleIcon } from '../icon/icon';
-export default {
-  title: 'Docs/IconGallery',
-  component: IconGallery
-};
-export const DefaultStyle = () => /*#__PURE__*/React.createElement(IconGallery, null, /*#__PURE__*/React.createElement(IconItem, {
-  name: "add"
-}, /*#__PURE__*/React.createElement(ExampleIcon, {
-  icon: "add"
-})), /*#__PURE__*/React.createElement(IconItem, {
-  name: "subtract"
-}, /*#__PURE__*/React.createElement(ExampleIcon, {
-  icon: "subtract"
-})), /*#__PURE__*/React.createElement(IconItem, {
-  name: "home"
-}, /*#__PURE__*/React.createElement(ExampleIcon, {
-  icon: "home"
-})), /*#__PURE__*/React.createElement(IconItem, {
-  name: "facehappy"
-}, /*#__PURE__*/React.createElement(ExampleIcon, {
-  icon: "facehappy"
-})), /*#__PURE__*/React.createElement(IconItem, {
-  name: "bar"
-}, /*#__PURE__*/React.createElement("img", {
-  src: "https://place-hold.it/50x50",
-  alt: "example"
-})), /*#__PURE__*/React.createElement(IconItem, {
-  name: "bar"
-}, /*#__PURE__*/React.createElement("img", {
-  src: "https://place-hold.it/50x50",
-  alt: "example"
-})));
-DefaultStyle.displayName = "DefaultStyle";

package/dist/modern/blocks/Preview.js

@@ -1,276 +0,0 @@
-const _excluded = ["isLoading", "isColumn", "columns", "children", "withSource", "withToolbar", "isExpanded", "additionalActions", "className"];
-
-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 "core-js/modules/es.array.reduce.js";
-
-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); }
-
-import React, { Children, useCallback, useState } from 'react';
-import { darken } from 'polished';
-import { styled } from '@storybook/theming';
-import global from 'global';
-import { getBlockBackgroundStyle } from './BlockBackgroundStyles';
-import { Source } from './Source';
-import { ActionBar } from '../ActionBar/ActionBar';
-import { Toolbar } from './Toolbar';
-import { ZoomContext } from './ZoomContext';
-import { Zoom } from '../Zoom/Zoom';
-import { StorySkeleton } from './Story';
-const ChildrenContainer = styled.div(({
-  isColumn,
-  columns,
-  layout
-}) => ({
-  display: isColumn || !columns ? 'block' : 'flex',
-  position: 'relative',
-  flexWrap: 'wrap',
-  overflow: 'auto',
-  flexDirection: isColumn ? 'column' : 'row',
-  '& .innerZoomElementWrapper > *': isColumn ? {
-    width: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-    display: 'block'
-  } : {
-    maxWidth: layout !== 'fullscreen' ? 'calc(100% - 20px)' : '100%',
-    display: 'inline-block'
-  }
-}), ({
-  layout = 'padded'
-}) => layout === 'centered' || layout === 'padded' ? {
-  padding: '30px 20px',
-  margin: -10,
-  '& .innerZoomElementWrapper > *': {
-    width: 'auto',
-    border: '10px solid transparent!important'
-  }
-} : {}, ({
-  layout = 'padded'
-}) => layout === 'centered' ? {
-  display: 'flex',
-  justifyContent: 'center',
-  justifyItems: 'center',
-  alignContent: 'center',
-  alignItems: 'center'
-} : {}, ({
-  columns
-}) => columns && columns > 1 ? {
-  '.innerZoomElementWrapper > *': {
-    minWidth: `calc(100% / ${columns} - 20px)`
-  }
-} : {});
-const StyledSource = styled(Source)(({
-  theme
-}) => ({
-  margin: 0,
-  borderTopLeftRadius: 0,
-  borderTopRightRadius: 0,
-  borderBottomLeftRadius: theme.appBorderRadius,
-  borderBottomRightRadius: theme.appBorderRadius,
-  border: 'none',
-  background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content),
-  color: theme.color.lightest,
-  button: {
-    background: theme.base === 'light' ? 'rgba(0, 0, 0, 0.85)' : darken(0.05, theme.background.content)
-  }
-}));
-const PreviewContainer = styled.div(({
-  theme,
-  withSource,
-  isExpanded
-}) => Object.assign({
-  position: 'relative',
-  overflow: 'hidden',
-  margin: '25px 0 40px'
-}, getBlockBackgroundStyle(theme), {
-  borderBottomLeftRadius: withSource && isExpanded && 0,
-  borderBottomRightRadius: withSource && isExpanded && 0,
-  borderBottomWidth: isExpanded && 0
-}), ({
-  withToolbar
-}) => withToolbar && {
-  paddingTop: 40
-});
-
-const getSource = (withSource, expanded, setExpanded) => {
-  switch (true) {
-    case !!(withSource && withSource.error):
-      {
-        return {
-          source: null,
-          actionItem: {
-            title: 'No code available',
-            className: 'docblock-code-toggle docblock-code-toggle--disabled',
-            disabled: true,
-            onClick: () => setExpanded(false)
-          }
-        };
-      }
-
-    case expanded:
-      {
-        return {
-          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
-            dark: true
-          })),
-          actionItem: {
-            title: 'Hide code',
-            className: 'docblock-code-toggle docblock-code-toggle--expanded',
-            onClick: () => setExpanded(false)
-          }
-        };
-      }
-
-    default:
-      {
-        return {
-          source: /*#__PURE__*/React.createElement(StyledSource, _extends({}, withSource, {
-            dark: true
-          })),
-          actionItem: {
-            title: 'Show code',
-            className: 'docblock-code-toggle',
-            onClick: () => setExpanded(true)
-          }
-        };
-      }
-  }
-};
-
-function getStoryId(children) {
-  if (Children.count(children) === 1) {
-    const elt = children;
-
-    if (elt.props) {
-      return elt.props.id;
-    }
-  }
-
-  return null;
-}
-
-const PositionedToolbar = styled(Toolbar)({
-  position: 'absolute',
-  top: 0,
-  left: 0,
-  right: 0,
-  height: 40
-});
-const Relative = styled.div({
-  overflow: 'hidden',
-  position: 'relative'
-});
-
-const getLayout = children => {
-  return children.reduce((result, c) => {
-    if (result) {
-      return result;
-    }
-
-    if (typeof c === 'string' || typeof c === 'number') {
-      return 'padded';
-    }
-
-    return c.props && c.props.parameters && c.props.parameters.layout || 'padded';
-  }, undefined);
-};
-/**
- * A preview component for showing one or more component `Story`
- * items. The preview also shows the source for the component
- * as a drop-down.
- */
-
-
-export const Preview = _ref => {
-  let {
-    isLoading,
-    isColumn,
-    columns,
-    children,
-    withSource,
-    withToolbar = false,
-    isExpanded = false,
-    additionalActions,
-    className
-  } = _ref,
-      props = _objectWithoutPropertiesLoose(_ref, _excluded);
-
-  const [expanded, setExpanded] = useState(isExpanded);
-  const {
-    source,
-    actionItem
-  } = getSource(withSource, expanded, setExpanded);
-  const [scale, setScale] = useState(1);
-  const previewClasses = [className].concat(['sbdocs', 'sbdocs-preview']);
-  const defaultActionItems = withSource ? [actionItem] : [];
-  const [additionalActionItems, setAdditionalActionItems] = useState(additionalActions ? [...additionalActions] : []);
-  const actionItems = [...defaultActionItems, ...additionalActionItems]; // @ts-ignore
-
-  const layout = getLayout(Children.count(children) === 1 ? [children] : children);
-  const {
-    window: globalWindow
-  } = global;
-  const copyToClipboard = useCallback(async text => {
-    const {
-      createCopyToClipboardFunction
-    } = await import('../syntaxhighlighter/syntaxhighlighter');
-    createCopyToClipboardFunction();
-  }, []);
-
-  const onCopyCapture = e => {
-    e.preventDefault();
-
-    if (additionalActionItems.filter(item => item.title === 'Copied').length === 0) {
-      copyToClipboard(source.props.code).then(() => {
-        setAdditionalActionItems([...additionalActionItems, {
-          title: 'Copied',
-          onClick: () => {}
-        }]);
-        globalWindow.setTimeout(() => setAdditionalActionItems(additionalActionItems.filter(item => item.title !== 'Copied')), 1500);
-      });
-    }
-  };
-
-  return /*#__PURE__*/React.createElement(PreviewContainer, _extends({
-    withSource,
-    withToolbar
-  }, props, {
-    className: previewClasses.join(' ')
-  }), withToolbar && /*#__PURE__*/React.createElement(PositionedToolbar, {
-    isLoading: isLoading,
-    border: true,
-    zoom: z => setScale(scale * z),
-    resetZoom: () => setScale(1),
-    storyId: getStoryId(children),
-    baseUrl: "./iframe.html"
-  }), /*#__PURE__*/React.createElement(ZoomContext.Provider, {
-    value: {
-      scale
-    }
-  }, /*#__PURE__*/React.createElement(Relative, {
-    className: "docs-story",
-    onCopyCapture: withSource && onCopyCapture
-  }, /*#__PURE__*/React.createElement(ChildrenContainer, {
-    isColumn: isColumn || !Array.isArray(children),
-    columns: columns,
-    layout: layout
-  }, /*#__PURE__*/React.createElement(Zoom.Element, {
-    scale: scale
-  }, Array.isArray(children) ? // eslint-disable-next-line react/no-array-index-key
-  children.map((child, i) => /*#__PURE__*/React.createElement("div", {
-    key: i
-  }, child)) : /*#__PURE__*/React.createElement("div", null, children))), /*#__PURE__*/React.createElement(ActionBar, {
-    actionItems: actionItems
-  }))), withSource && expanded && source);
-};
-Preview.displayName = "Preview";
-const StyledPreview = styled(Preview)(() => ({
-  '.docs-story': {
-    paddingTop: 32,
-    paddingBottom: 40
-  }
-}));
-export const PreviewSkeleton = () => /*#__PURE__*/React.createElement(StyledPreview, {
-  isLoading: true,
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(StorySkeleton, null));
-PreviewSkeleton.displayName = "PreviewSkeleton";

package/dist/modern/blocks/Preview.stories.js

@@ -1,219 +0,0 @@
-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); }
-
-import React from 'react';
-import { styled } from '@storybook/theming';
-import global from 'global';
-import { Spaced } from '../spaced/Spaced';
-import { Preview, PreviewSkeleton } from './Preview';
-import { Story } from './Story';
-import { Button } from '../Button/Button';
-import * as Source from './Source.stories';
-const {
-  window: globalWindow
-} = global;
-export default {
-  title: 'Docs/Preview',
-  component: Preview
-};
-export const Loading = () => /*#__PURE__*/React.createElement(PreviewSkeleton, null);
-Loading.displayName = "Loading";
-export const CodeCollapsed = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: false,
-  withSource: Source.JSX.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeCollapsed.displayName = "CodeCollapsed";
-export const CodeExpanded = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: true,
-  withSource: Source.JSX.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeExpanded.displayName = "CodeExpanded";
-export const CodeError = () => /*#__PURE__*/React.createElement(Preview, {
-  isExpanded: true,
-  withSource: Source.SourceUnavailable.args
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-CodeError.displayName = "CodeError";
-export const Single = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-Single.displayName = "Single";
-export const Row = () => /*#__PURE__*/React.createElement(Preview, null, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 7"));
-Row.displayName = "Row";
-export const Column = () => /*#__PURE__*/React.createElement(Preview, {
-  isColumn: true
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"));
-Column.displayName = "Column";
-export const GridWith3Columns = () => /*#__PURE__*/React.createElement(Preview, {
-  columns: 3
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 2"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 3"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 4"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 5"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 6"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 7 long long long long long title"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 8"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 9"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 10"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 11"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 12"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 13"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 14"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 15"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 16"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 17"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 18"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 19"), /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 20"));
-GridWith3Columns.displayName = "GridWith3Columns";
-
-const buttonFn = () => /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Hello Button");
-
-buttonFn.displayName = "buttonFn";
-export const WithToolbar = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "with toolbar"
-}));
-WithToolbar.displayName = "WithToolbar";
-const Horizontal = styled(props => /*#__PURE__*/React.createElement(Spaced, _extends({
-  col: 1
-}, props)))({
-  display: 'grid',
-  gridTemplateColumns: '100px calc(100vw + 100px) 100px'
-});
-export const Wide = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Horizontal, null, /*#__PURE__*/React.createElement("div", null, "START"), /*#__PURE__*/React.createElement("div", null, "middle"), /*#__PURE__*/React.createElement("div", null, "END")));
-Wide.displayName = "Wide";
-export const WithToolbarMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1"
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2"
-}));
-WithToolbarMulti.displayName = "WithToolbarMulti";
-export const WithFullscreenSingle = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}));
-WithFullscreenSingle.displayName = "WithFullscreenSingle";
-export const WithFullscreenMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2",
-  parameters: {
-    layout: 'fullscreen'
-  }
-}));
-WithFullscreenMulti.displayName = "WithFullscreenMulti";
-export const WithCenteredSingle = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'centered'
-  }
-}));
-WithCenteredSingle.displayName = "WithCenteredSingle";
-export const WithCenteredMulti = () => /*#__PURE__*/React.createElement(Preview, {
-  withToolbar: true
-}, /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story1",
-  parameters: {
-    layout: 'centered'
-  }
-}), /*#__PURE__*/React.createElement(Story, {
-  inline: true,
-  storyFn: buttonFn,
-  title: "story2",
-  parameters: {
-    layout: 'centered'
-  }
-}));
-WithCenteredMulti.displayName = "WithCenteredMulti";
-export const WithAdditionalActions = () => /*#__PURE__*/React.createElement(Preview, {
-  additionalActions: [{
-    title: 'Open on GitHub',
-    onClick: () => {
-      globalWindow.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
-    }
-  }]
-}, /*#__PURE__*/React.createElement(Button, {
-  secondary: true
-}, "Button 1"));
-WithAdditionalActions.displayName = "WithAdditionalActions";