@storybook/components 6.5.0-alpha.7 → 6.5.0-beta.1

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

@@ -1,345 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
-
-require("core-js/modules/es.weak-map.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/web.dom-collections.iterator.js");
-
-require("core-js/modules/es.object.get-own-property-descriptor.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.symbol.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.WithAdditionalActions = exports.WithCenteredMulti = exports.WithCenteredSingle = exports.WithFullscreenMulti = exports.WithFullscreenSingle = exports.WithToolbarMulti = exports.Wide = exports.WithToolbar = exports.GridWith3Columns = exports.Column = exports.Row = exports.Single = exports.CodeError = exports.CodeExpanded = exports.CodeCollapsed = exports.Loading = exports.default = void 0;
-
-require("core-js/modules/es.object.assign.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _global = _interopRequireDefault(require("global"));
-
-var _Spaced = require("../spaced/Spaced");
-
-var _Preview = require("./Preview");
-
-var _Story = require("./Story");
-
-var _Button = require("../Button/Button");
-
-var Source = _interopRequireWildcard(require("./Source.stories"));
-
-function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function _getRequireWildcardCache() { return cache; }; return cache; }
-
-function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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); }
-
-var globalWindow = _global.default.window;
-var _default = {
-  title: 'Docs/Preview',
-  component: _Preview.Preview
-};
-exports.default = _default;
-
-var Loading = function Loading() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.PreviewSkeleton, null);
-};
-
-exports.Loading = Loading;
-Loading.displayName = "Loading";
-
-var CodeCollapsed = function CodeCollapsed() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    isExpanded: false,
-    withSource: Source.JSX.args
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"));
-};
-
-exports.CodeCollapsed = CodeCollapsed;
-CodeCollapsed.displayName = "CodeCollapsed";
-
-var CodeExpanded = function CodeExpanded() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    isExpanded: true,
-    withSource: Source.JSX.args
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"));
-};
-
-exports.CodeExpanded = CodeExpanded;
-CodeExpanded.displayName = "CodeExpanded";
-
-var CodeError = function CodeError() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    isExpanded: true,
-    withSource: Source.SourceUnavailable.args
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"));
-};
-
-exports.CodeError = CodeError;
-CodeError.displayName = "CodeError";
-
-var Single = function Single() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"));
-};
-
-exports.Single = Single;
-Single.displayName = "Single";
-
-var Row = function Row() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, null, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 3"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 4"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 5"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 6"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 7"));
-};
-
-exports.Row = Row;
-Row.displayName = "Row";
-
-var Column = function Column() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    isColumn: true
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 3"));
-};
-
-exports.Column = Column;
-Column.displayName = "Column";
-
-var GridWith3Columns = function GridWith3Columns() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    columns: 3
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 2"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 3"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 4"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 5"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 6"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 7 long long long long long title"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 8"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 9"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 10"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 11"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 12"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 13"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 14"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 15"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 16"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 17"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 18"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 19"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 20"));
-};
-
-exports.GridWith3Columns = GridWith3Columns;
-GridWith3Columns.displayName = "GridWith3Columns";
-
-var buttonFn = function buttonFn() {
-  return /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Hello Button");
-};
-
-buttonFn.displayName = "buttonFn";
-
-var WithToolbar = function WithToolbar() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "with toolbar"
-  }));
-};
-
-exports.WithToolbar = WithToolbar;
-WithToolbar.displayName = "WithToolbar";
-var Horizontal = (0, _theming.styled)(function (props) {
-  return /*#__PURE__*/_react.default.createElement(_Spaced.Spaced, _extends({
-    col: 1
-  }, props));
-})({
-  display: 'grid',
-  gridTemplateColumns: '100px calc(100vw + 100px) 100px'
-});
-
-var Wide = function Wide() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(Horizontal, null, /*#__PURE__*/_react.default.createElement("div", null, "START"), /*#__PURE__*/_react.default.createElement("div", null, "middle"), /*#__PURE__*/_react.default.createElement("div", null, "END")));
-};
-
-exports.Wide = Wide;
-Wide.displayName = "Wide";
-
-var WithToolbarMulti = function WithToolbarMulti() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story1"
-  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story2"
-  }));
-};
-
-exports.WithToolbarMulti = WithToolbarMulti;
-WithToolbarMulti.displayName = "WithToolbarMulti";
-
-var WithFullscreenSingle = function WithFullscreenSingle() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story1",
-    parameters: {
-      layout: 'fullscreen'
-    }
-  }));
-};
-
-exports.WithFullscreenSingle = WithFullscreenSingle;
-WithFullscreenSingle.displayName = "WithFullscreenSingle";
-
-var WithFullscreenMulti = function WithFullscreenMulti() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story1",
-    parameters: {
-      layout: 'fullscreen'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story2",
-    parameters: {
-      layout: 'fullscreen'
-    }
-  }));
-};
-
-exports.WithFullscreenMulti = WithFullscreenMulti;
-WithFullscreenMulti.displayName = "WithFullscreenMulti";
-
-var WithCenteredSingle = function WithCenteredSingle() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story1",
-    parameters: {
-      layout: 'centered'
-    }
-  }));
-};
-
-exports.WithCenteredSingle = WithCenteredSingle;
-WithCenteredSingle.displayName = "WithCenteredSingle";
-
-var WithCenteredMulti = function WithCenteredMulti() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    withToolbar: true
-  }, /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story1",
-    parameters: {
-      layout: 'centered'
-    }
-  }), /*#__PURE__*/_react.default.createElement(_Story.Story, {
-    inline: true,
-    storyFn: buttonFn,
-    title: "story2",
-    parameters: {
-      layout: 'centered'
-    }
-  }));
-};
-
-exports.WithCenteredMulti = WithCenteredMulti;
-WithCenteredMulti.displayName = "WithCenteredMulti";
-
-var WithAdditionalActions = function WithAdditionalActions() {
-  return /*#__PURE__*/_react.default.createElement(_Preview.Preview, {
-    additionalActions: [{
-      title: 'Open on GitHub',
-      onClick: function onClick() {
-        globalWindow.location.href = 'https://github.com/storybookjs/storybook/blob/next/lib/components/src/blocks/Preview.stories.tsx#L140-L147';
-      }
-    }]
-  }, /*#__PURE__*/_react.default.createElement(_Button.Button, {
-    secondary: true
-  }, "Button 1"));
-};
-
-exports.WithAdditionalActions = WithAdditionalActions;
-WithAdditionalActions.displayName = "WithAdditionalActions";

package/dist/cjs/blocks/Source.js

@@ -1,143 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.object.assign.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.StyledSyntaxHighlighter = exports.Source = exports.SourceError = void 0;
-
-require("core-js/modules/es.object.keys.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _EmptyBlock = require("./EmptyBlock");
-
-var _lazySyntaxhighlighter = require("../syntaxhighlighter/lazy-syntaxhighlighter");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
-
-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; }
-
-var StyledSyntaxHighlighter = (0, _theming.styled)(_lazySyntaxhighlighter.SyntaxHighlighter)(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    // DocBlocks-specific styling and overrides
-    fontSize: "".concat(theme.typography.size.s2 - 1, "px"),
-    lineHeight: '19px',
-    margin: '25px 0 40px',
-    borderRadius: theme.appBorderRadius,
-    boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-    'pre.prismjs': {
-      padding: 20,
-      background: 'inherit'
-    }
-  };
-});
-exports.StyledSyntaxHighlighter = StyledSyntaxHighlighter;
-var SourceError;
-exports.SourceError = SourceError;
-
-(function (SourceError) {
-  SourceError["NO_STORY"] = "There\u2019s no story here.";
-  SourceError["SOURCE_UNAVAILABLE"] = "Oh no! The source is not available.";
-})(SourceError || (exports.SourceError = SourceError = {}));
-
-var SourceSkeletonWrapper = _theming.styled.div(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    background: theme.background.content,
-    borderRadius: theme.appBorderRadius,
-    border: "1px solid ".concat(theme.appBorderColor),
-    boxShadow: theme.base === 'light' ? 'rgba(0, 0, 0, 0.10) 0 1px 3px 0' : 'rgba(0, 0, 0, 0.20) 0 2px 5px 0',
-    margin: '25px 0 40px',
-    padding: '20px 20px 20px 22px'
-  };
-});
-
-var SourceSkeletonPlaceholder = _theming.styled.div(function (_ref3) {
-  var theme = _ref3.theme;
-  return {
-    animation: "".concat(theme.animation.glow, " 1.5s ease-in-out infinite"),
-    background: theme.appBorderColor,
-    height: 17,
-    marginTop: 1,
-    width: '60%',
-    '&:first-child': {
-      margin: 0
-    }
-  };
-});
-
-var SourceSkeleton = function SourceSkeleton() {
-  return /*#__PURE__*/_react.default.createElement(SourceSkeletonWrapper, null, /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, null), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
-    style: {
-      width: '80%'
-    }
-  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
-    style: {
-      width: '30%'
-    }
-  }), /*#__PURE__*/_react.default.createElement(SourceSkeletonPlaceholder, {
-    style: {
-      width: '80%'
-    }
-  }));
-};
-
-SourceSkeleton.displayName = "SourceSkeleton";
-
-/**
- * Syntax-highlighted source code for a component (or anything!)
- */
-var Source = function Source(props) {
-  var _ref4 = props,
-      isLoading = _ref4.isLoading,
-      error = _ref4.error;
-
-  if (isLoading) {
-    return /*#__PURE__*/_react.default.createElement(SourceSkeleton, null);
-  }
-
-  if (error) {
-    return /*#__PURE__*/_react.default.createElement(_EmptyBlock.EmptyBlock, null, error);
-  }
-
-  var _ref5 = props,
-      language = _ref5.language,
-      code = _ref5.code,
-      dark = _ref5.dark,
-      format = _ref5.format,
-      rest = _objectWithoutProperties(_ref5, ["language", "code", "dark", "format"]);
-
-  var syntaxHighlighter = /*#__PURE__*/_react.default.createElement(StyledSyntaxHighlighter, _extends({
-    bordered: true,
-    copyable: true,
-    format: format,
-    language: language,
-    className: "docblock-source"
-  }, rest), code);
-
-  if (typeof dark === 'undefined') {
-    return syntaxHighlighter;
-  }
-
-  var overrideTheme = dark ? _theming.themes.dark : _theming.themes.light;
-  return /*#__PURE__*/_react.default.createElement(_theming.ThemeProvider, {
-    theme: (0, _theming.convert)(overrideTheme)
-  }, syntaxHighlighter);
-};
-
-exports.Source = Source;
-Source.displayName = "Source";
-Source.defaultProps = {
-  format: false
-};

package/dist/cjs/blocks/Source.stories.js

@@ -1,76 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.SourceUnavailable = exports.NoStory = exports.CSS = exports.JSX = exports.Loading = exports.default = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _Source = require("./Source");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var _default = {
-  title: 'Docs/Source',
-  component: _Source.Source
-};
-exports.default = _default;
-
-var Loading = function Loading(args) {
-  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
-};
-
-exports.Loading = Loading;
-Loading.displayName = "Loading";
-Loading.args = {
-  isLoading: true
-};
-var jsxCode = "\n<MyComponent boolProp scalarProp={1} complexProp={{ foo: 1, bar: '2' }}>\n  <SomeOtherComponent funcProp={(a) => a.id} />\n</MyComponent>\n";
-
-var JSX = function JSX(args) {
-  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
-};
-
-exports.JSX = JSX;
-JSX.displayName = "JSX";
-JSX.args = {
-  code: jsxCode,
-  language: 'jsx',
-  format: false
-};
-var cssCode = "\n@-webkit-keyframes blinker {\n  from { opacity: 1.0; }\n  to { opacity: 0.0; }\n}\n\n.waitingForConnection {\n  -webkit-animation-name: blinker;\n  -webkit-animation-iteration-count: infinite;\n  -webkit-animation-timing-function: cubic-bezier(.5, 0, 1, 1);\n  -webkit-animation-duration: 1.7s;\n}\n";
-
-var CSS = function CSS(args) {
-  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
-};
-
-exports.CSS = CSS;
-CSS.displayName = "CSS";
-CSS.args = {
-  code: cssCode,
-  language: 'css',
-  format: false
-};
-
-var NoStory = function NoStory(args) {
-  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
-};
-
-exports.NoStory = NoStory;
-NoStory.displayName = "NoStory";
-NoStory.args = {
-  error: _Source.SourceError.NO_STORY,
-  format: false
-};
-
-var SourceUnavailable = function SourceUnavailable(args) {
-  return /*#__PURE__*/_react.default.createElement(_Source.Source, args);
-};
-
-exports.SourceUnavailable = SourceUnavailable;
-SourceUnavailable.displayName = "SourceUnavailable";
-SourceUnavailable.args = {
-  error: _Source.SourceError.SOURCE_UNAVAILABLE,
-  format: false
-};