@storybook/core-common 6.4.0-beta.3 → 6.4.0-beta.33

package/dist/cjs/index.js

@@ -43,6 +43,19 @@ Object.keys(_checkWebpackVersion).forEach(function (key) {
   });
 });
 
+var _checkAddonOrder = require("./utils/check-addon-order");
+
+Object.keys(_checkAddonOrder).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _checkAddonOrder[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _checkAddonOrder[key];
+    }
+  });
+});
+
 var _envs = require("./utils/envs");
 
 Object.keys(_envs).forEach(function (key) {
@@ -342,6 +355,19 @@ Object.keys(_readTemplate).forEach(function (key) {
   });
 });
 
+var _findDistEsm = require("./utils/findDistEsm");
+
+Object.keys(_findDistEsm).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _findDistEsm[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _findDistEsm[key];
+    }
+  });
+});
+
 var _types = require("./types");
 
 Object.keys(_types).forEach(function (key) {

package/dist/cjs/presets.js

@@ -21,6 +21,8 @@ var _resolveFrom = _interopRequireDefault(require("resolve-from"));
 
 var _loadCustomPresets = require("./utils/load-custom-presets");
 
+var _interpretRequire = require("./utils/interpret-require");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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; }
@@ -48,13 +50,15 @@ function filterPresetsConfig(presetsConfig) {
   });
 }
 
-function resolvePresetFunction(input, presetOptions, storybookOptions) {
+function resolvePresetFunction(input, presetOptions, framework, storybookOptions) {
+  var prepend = [framework].filter(Boolean);
+
   if (isFunction(input)) {
-    return input(_objectSpread(_objectSpread({}, storybookOptions), presetOptions));
+    return [...prepend, ...input(_objectSpread(_objectSpread({}, storybookOptions), presetOptions))];
   }
 
   if (Array.isArray(input)) {
-    return input;
+    return [...prepend, ...input];
   }
 
   return [];
@@ -197,11 +201,12 @@ function loadPreset(input, level, storybookOptions) {
       var _contents = contents,
           addonsInput = _contents.addons,
           presetsInput = _contents.presets,
-          rest = _objectWithoutProperties(_contents, ["addons", "presets"]);
+          framework = _contents.framework,
+          rest = _objectWithoutProperties(_contents, ["addons", "presets", "framework"]);
 
-      var _subPresets = resolvePresetFunction(presetsInput, presetOptions, storybookOptions);
+      var _subPresets = resolvePresetFunction(presetsInput, presetOptions, framework, storybookOptions);
 
-      var subAddons = resolvePresetFunction(addonsInput, presetOptions, storybookOptions);
+      var subAddons = resolvePresetFunction(addonsInput, presetOptions, framework, storybookOptions);
       return [...loadPresets([..._subPresets], level + 1, storybookOptions), ...loadPresets([...subAddons.map(map(storybookOptions))].filter(Boolean), level + 1, storybookOptions), {
         name: name,
         preset: rest,
@@ -239,8 +244,8 @@ function loadPresets(presets, level, storybookOptions) {
 }
 
 function applyPresets(presets, extension, config, args, storybookOptions) {
-  var presetResult = new Promise(function (resolve) {
-    return resolve(config);
+  var presetResult = new Promise(function (res) {
+    return res(config);
   });
 
   if (!presets.length) {
@@ -297,6 +302,32 @@ function getPresets(presets, storybookOptions) {
     }
   };
 }
+/**
+ * Get the `framework` provided in main.js and also do error checking up front
+ */
+
+
+var getFrameworkPackage = function (configDir) {
+  var main = (0, _interpretRequire.serverRequire)((0, _path.resolve)(configDir, 'main'));
+  if (!main) return null;
+  var frameworkPackage = main.framework,
+      _main$features = main.features,
+      features = _main$features === void 0 ? {} : _main$features;
+
+  if (features.breakingChangesV7 && !frameworkPackage) {
+    throw new Error((0, _tsDedent.default)`
+      Expected 'framework' in your main.js, didn't find one.
+
+      You can fix this automatically by running:
+
+      npx sb@next automigrate
+    
+      More info: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#mainjs-framework-field
+    `);
+  }
+
+  return frameworkPackage;
+};
 
 function loadAllPresets(options) {
   var _options$corePresets = options.corePresets,
@@ -307,7 +338,8 @@ function loadAllPresets(options) {
       overridePresets = _options$overridePres === void 0 ? [] : _options$overridePres,
       restOptions = _objectWithoutProperties(options, ["corePresets", "frameworkPresets", "overridePresets"]);
 
-  var presetsConfig = [...corePresets, ...frameworkPresets, ...(0, _loadCustomPresets.loadCustomPresets)(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
+  var frameworkPackage = getFrameworkPackage(options.configDir);
+  var presetsConfig = [...corePresets, ...(frameworkPackage ? [] : frameworkPresets), ...(0, _loadCustomPresets.loadCustomPresets)(options), ...overridePresets]; // Remove `@storybook/preset-typescript` and add a warning if in use.
 
   var filteredPresetConfig = filterPresetsConfig(presetsConfig);
 

package/dist/cjs/templates/base-preview-body.html

@@ -1,3 +1,231 @@
+<style>
+  @-webkit-keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotate360 {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  @keyframes glow {
+    0%,
+    100% {
+      opacity: 1;
+    }
+    50% {
+      opacity: 0.4;
+    }
+  }
+  .isLoading {
+    cursor: progress;
+  }
+
+  .loader {
+    -webkit-animation: rotate360 0.7s linear infinite;
+    animation: rotate360 0.7s linear infinite;
+    border-color: rgba(97, 97, 97, 0.29);
+    border-radius: 50%;
+    border-style: solid;
+    border-top-color: #646464;
+    border-width: 2px;
+    display: inline-block;
+    height: 32px;
+    left: 50%;
+    margin-left: -16px;
+    margin-top: -16px;
+    mix-blend-mode: difference;
+    overflow: hidden;
+    position: absolute;
+    top: 50%;
+    transition: all 200ms ease-out;
+    vertical-align: top;
+    width: 32px;
+    z-index: 4;
+  }
+
+  .previewBlock {
+    background: #fff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 0;
+    margin: 25px auto 40px;
+    max-width: 600px;
+  }
+
+  .previewBlock_header {
+    align-items: center;
+    background: #fff;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 -1px 0 0 inset;
+    display: flex;
+    gap: 14px;
+    height: 40px;
+    padding: 0 12px;
+  }
+
+  .previewBlock_icon {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    height: 14px;
+    width: 14px;
+  }
+  .previewBlock_icon:last-child {
+    margin-left: auto;
+  }
+
+  .previewBlock_body {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    height: 110px;
+    position: relative;
+  }
+
+  .argsTable {
+    margin: 0 auto;
+    max-width: 600px;
+  }
+
+  .argsTable_header {
+    align-content: stretch;
+    display: flex;
+    gap: 16px;
+    margin-top: 25px;
+    padding: 10px 20px;
+  }
+  .argsTable_header div {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: #e6e6e6;
+    flex-shrink: 0;
+    height: 20px;
+  }
+  .argsTable_header div:first-child,
+  .argsTable_header div:nth-child(4) {
+    width: 20%;
+  }
+  .argsTable_header div:nth-child(2) {
+    width: 30%;
+  }
+  .argsTable_header div:nth-child(3) {
+    flex-grow: 1;
+  }
+  .argsTable_header div:last-child {
+    width: 30px;
+  }
+  @media (max-width: 500px) {
+    .argsTable_header div:nth-child(n + 4) {
+      display: none;
+    }
+  }
+
+  .argsTable_body {
+    background: #ffffff;
+    border-radius: 4px;
+    box-shadow: rgba(0, 0, 0, 0.1) 0 1px 3px 1px, rgba(0, 0, 0, 0.065) 0 0 0 1px;
+  }
+
+  .argsTable_row {
+    align-content: stretch;
+    border-top-color: #e6e6e6;
+    border-top-style: solid;
+    border-top-width: 1px;
+    display: flex;
+    gap: 16px;
+    padding: 20px;
+  }
+  .argsTable_row:first-child {
+    border-top: 0;
+  }
+  .argsTable_row div {
+    -webkit-animation: glow 1.5s ease-in-out infinite;
+    animation: glow 1.5s ease-in-out infinite;
+    background: rgba(0, 0, 0, 0.1);
+    flex-shrink: 0;
+    height: 20px;
+  }
+  .argsTable_row div:first-child {
+    width: 20%;
+  }
+  .argsTable_row div:nth-child(2) {
+    width: 30%;
+  }
+  .argsTable_row div:nth-child(3) {
+    flex-grow: 1;
+  }
+  .argsTable_row div:last-child {
+    width: calc(20% + 47px);
+  }
+  @media (max-width: 500px) {
+    .argsTable_row div:last-child {
+      display: none;
+    }
+  }
+</style>
+
+<div class="sb-preparing-story sb-wrapper">
+  <div class="loader"></div>
+</div>
+
+<div class="sb-preparing-docs sb-wrapper">
+  <div class="previewBlock">
+    <div class="previewBlock_header">
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+      <div class="previewBlock_icon"></div>
+    </div>
+    <div class="previewBlock_body">
+      <div class="loader"></div>
+    </div>
+  </div>
+  <div class="argsTable">
+    <div class="argsTable_header">
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+      <div></div>
+    </div>
+    <div class="argsTable_body">
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+      <div class="argsTable_row">
+        <div></div>
+        <div></div>
+        <div></div>
+        <div></div>
+      </div>
+    </div>
+  </div>
+</div>
+
 <div class="sb-nopreview sb-wrapper">
   <div class="sb-nopreview_main">
     <h1 class="sb-nopreview_heading sb-heading">No Preview</h1>
@@ -6,7 +234,9 @@
       <li>Please check the Storybook config.</li>
       <li>Try reloading the page.</li>
     </ul>
-    <p>If the problem persists, check the browser console, or the terminal you've run Storybook from.</p>
+    <p>
+      If the problem persists, check the browser console, or the terminal you've run Storybook from.
+    </p>
   </div>
 </div>
 

package/dist/cjs/templates/base-preview-head.html

@@ -1,7 +1,10 @@
-<base target="_parent">
+<base target="_parent" />
 
 <style>
-  :not(.sb-show-main) > .sb-main,
+  :not(.sb-show-main) > #root,
+  :not(.sb-show-main) > #docs-root,
+  :not(.sb-show-preparing-story) > .sb-preparing-story,
+  :not(.sb-show-preparing-docs) > .sb-preparing-docs,
   :not(.sb-show-nopreview) > .sb-nopreview,
   :not(.sb-show-errordisplay) > .sb-errordisplay {
     display: none;
@@ -50,7 +53,8 @@
     left: 0;
     right: 0;
     padding: 20px;
-    font-family: "Nunito Sans", -apple-system, ".SFNSText-Regular", "San Francisco", BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-family: 'Nunito Sans', -apple-system, '.SFNSText-Regular', 'San Francisco',
+      BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Helvetica, Arial, sans-serif;
     -webkit-font-smoothing: antialiased;
     overflow: auto;
   }
@@ -73,7 +77,7 @@
     margin: auto;
     padding: 30px;
     border-radius: 10px;
-    background: rgba(0,0,0,0.03);
+    background: rgba(0, 0, 0, 0.03);
   }
 
   .sb-nopreview_heading {
@@ -91,7 +95,8 @@
     padding: 10px;
     background: #000;
     color: #eee;
-    font-family: "Operator Mono", "Fira Code Retina", "Fira Code", "FiraCode-Retina", "Andale Mono", "Lucida Console", Consolas, Monaco, monospace;
+    font-family: 'Operator Mono', 'Fira Code Retina', 'Fira Code', 'FiraCode-Retina', 'Andale Mono',
+      'Lucida Console', Consolas, Monaco, monospace;
   }
 
   .sb-errordisplay pre {

package/dist/cjs/templates/index.ejs

@@ -2,16 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <title><%= options.title || 'Storybook'%></title>
+    <title><%= htmlWebpackPlugin.options.title || 'Storybook'%></title>
 
-    <% if (files.favicon) { %>
-    <link rel="shortcut icon" href="<%= files.favicon%>" />
+    <% if (htmlWebpackPlugin.files.favicon) { %>
+    <link rel="shortcut icon" href="<%= htmlWebpackPlugin.files.favicon%>" />
     <% } %>
 
     <meta name="viewport" content="width=device-width, initial-scale=1" />
 
     <% if (typeof headHtmlSnippet !== 'undefined') { %> <%= headHtmlSnippet %> <% } %> <%
-    files.css.forEach(file => { %>
+    htmlWebpackPlugin.files.css.forEach(file => { %>
     <link href="<%= file %>" rel="stylesheet" />
     <% }); %>
 
@@ -23,25 +23,21 @@
     </style>
   </head>
   <body>
-    <% if (typeof bodyHtmlSnippet !== 'undefined') { %>
-      <%= bodyHtmlSnippet %>
-    <% } %>
+    <% if (typeof bodyHtmlSnippet !== 'undefined') { %> <%= bodyHtmlSnippet %> <% } %>
 
     <div id="root"></div>
     <div id="docs-root"></div>
 
     <% if (typeof globals !== 'undefined' && Object.keys(globals).length) { %>
-      <script>
-        <% for (var varName in globals) { %>
-            <% if (globals[varName] != undefined) { %>
-              window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
-            <% } %>
-        <% } %>
-      </script>
-    <% } %>
-    
-    <% files.js.forEach(file => { %>
-      <script src="<%= file %>"></script>
+    <script>
+      <% for (var varName in globals) { %>
+          <% if (globals[varName] != undefined) { %>
+            window['<%=varName%>'] = <%= JSON.stringify(globals[varName]) %>;
+          <% } %>
+      <% } %>
+    </script>
+    <% } %> <% htmlWebpackPlugin.files.js.forEach(file => { %>
+    <script src="<%= file %>"></script>
     <% }); %>
   </body>
 </html>

package/dist/cjs/utils/check-addon-order.js

@@ -0,0 +1,54 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.checkAddonOrder = void 0;
+
+require("core-js/modules/es.promise.js");
+
+var _require = require('@storybook/node-logger'),
+    logger = _require.logger;
+
+var predicateFor = function (addon) {
+  return function (entry) {
+    var name = entry.name || entry;
+    return name && name.includes(addon);
+  };
+};
+
+var isCorrectOrder = function (addons, before, after) {
+  var essentialsIndex = addons.findIndex(predicateFor('@storybook/addon-essentials'));
+  var beforeIndex = addons.findIndex(predicateFor(before.name));
+  var afterIndex = addons.findIndex(predicateFor(after.name));
+  if (beforeIndex === -1 && before.inEssentials) beforeIndex = essentialsIndex;
+  if (afterIndex === -1 && after.inEssentials) afterIndex = essentialsIndex;
+  return beforeIndex !== -1 && afterIndex !== -1 && beforeIndex <= afterIndex;
+};
+
+var checkAddonOrder = async function ({
+  before: before,
+  after: after,
+  configFile: configFile,
+  getConfig: getConfig
+}) {
+  try {
+    var config = await getConfig(configFile);
+
+    if (!(config !== null && config !== void 0 && config.addons)) {
+      logger.warn(`Unable to find 'addons' config in main Storybook config`);
+      return;
+    }
+
+    if (!isCorrectOrder(config.addons, before, after)) {
+      var orEssentials = " (or '@storybook/addon-essentials')";
+      var beforeText = `'${before.name}'${before.inEssentials ? orEssentials : ''}`;
+      var afterText = `'${after.name}'${after.inEssentials ? orEssentials : ''}`;
+      logger.warn(`Expected ${beforeText} to be listed before ${afterText} in main Storybook config.`);
+    }
+  } catch (e) {
+    logger.warn(`Unable to load config file: ${configFile}`);
+  }
+};
+
+exports.checkAddonOrder = checkAddonOrder;

package/dist/cjs/utils/findDistEsm.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.findDistEsm = void 0;
+
+var _path = _interopRequireDefault(require("path"));
+
+var _findUp = require("find-up");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var findDistEsm = function (cwd, relativePath) {
+  var packageDir = _path.default.dirname((0, _findUp.sync)('package.json', {
+    cwd: cwd
+  }));
+
+  return _path.default.join(packageDir, 'dist', 'esm', relativePath);
+};
+
+exports.findDistEsm = findDistEsm;

package/dist/cjs/utils/glob-to-regexp.js

@@ -0,0 +1,32 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.globToRegexp = globToRegexp;
+
+var _picomatch = require("picomatch");
+
+function globToRegexp(glob) {
+  var regex = (0, _picomatch.makeRe)(glob, {
+    fastpaths: false,
+    noglobstar: false,
+    bash: false
+  });
+
+  if (!regex.source.startsWith('^')) {
+    throw new Error(`Invalid glob: >> ${glob} >> ${regex}`);
+  }
+
+  if (!glob.startsWith('./')) {
+    return regex;
+  } // makeRe is sort of funny. If you pass it a directory starting with `./` it
+  // creates a matcher that expects files with no prefix (e.g. `src/file.js`)
+  // but if you pass it a directory that starts with `../` it expects files that
+  // start with `../`. Let's make it consistent.
+  // Globs starting `**` require special treatment due to the regex they
+  // produce, specifically a negative look-ahead
+
+
+  return new RegExp(['^\\.', glob.startsWith('./**') ? '' : '[\\\\/]', regex.source.substring(1)].join(''));
+}