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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@storybook/components",
-  "version": "6.5.0-alpha.34",
+  "version": "6.5.0-alpha.39",
   "description": "Core Storybook Components",
   "keywords": [
     "storybook"
@@ -37,20 +37,25 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "ts-node ../../scripts/prebundle.ts"
   },
   "dependencies": {
-    "@popperjs/core": "^2.6.0",
-    "@storybook/client-logger": "6.5.0-alpha.34",
+    "@storybook/client-logger": "6.5.0-alpha.39",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
-    "@storybook/theming": "6.5.0-alpha.34",
+    "@storybook/theming": "6.5.0-alpha.39",
+    "core-js": "^3.8.2",
+    "regenerator-runtime": "^0.13.7"
+  },
+  "devDependencies": {
+    "@popperjs/core": "^2.6.0",
     "@types/color-convert": "^2.0.0",
     "@types/overlayscrollbars": "^1.12.0",
     "@types/react-syntax-highlighter": "11.0.5",
     "color-convert": "^2.0.1",
-    "core-js": "^3.8.2",
+    "css": "^3.0.0",
     "fast-deep-equal": "^3.1.3",
     "global": "^4.4.0",
+    "jest": "^26.6.3",
     "lodash": "^4.17.21",
     "markdown-to-jsx": "^7.1.3",
     "memoizerific": "^1.11.3",
@@ -62,14 +67,10 @@
     "react-popper-tooltip": "^3.1.1",
     "react-syntax-highlighter": "^15.4.5",
     "react-textarea-autosize": "^8.3.0",
-    "regenerator-runtime": "^0.13.7",
     "ts-dedent": "^2.0.0",
+    "ts-node": "^10.4.0",
     "util-deprecate": "^1.0.2"
   },
-  "devDependencies": {
-    "css": "^3.0.0",
-    "jest": "^26.6.3"
-  },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"
@@ -77,6 +78,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5eafd588972634b4d76ca2ebf01bd5ca2aaa0119",
+  "bundlerEntrypoint": "./src/index.ts",
+  "gitHead": "9b5d9b1f46a31a9881fe71a153a9b810e8203a93",
   "sbmodern": "dist/modern/index.js"
 }

package/dist/cjs/ActionBar/ActionBar.js

@@ -1,106 +0,0 @@
-"use strict";
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.ActionButton = exports.ActionBar = void 0;
-
-require("core-js/modules/es.string.bold.js");
-
-require("core-js/modules/es.array.map.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _excluded = ["actionItems"];
-
-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; }
-
-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 Container = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    position: 'absolute',
-    bottom: 0,
-    right: 0,
-    maxWidth: '100%',
-    display: 'flex',
-    background: theme.background.content,
-    zIndex: 1
-  };
-});
-
-var ActionButton = _theming.styled.button(function (_ref2) {
-  var theme = _ref2.theme;
-  return {
-    margin: 0,
-    border: '0 none',
-    padding: '4px 10px',
-    cursor: 'pointer',
-    display: 'flex',
-    alignItems: 'center',
-    color: theme.color.defaultText,
-    background: theme.background.content,
-    fontSize: 12,
-    lineHeight: '16px',
-    fontFamily: theme.typography.fonts.base,
-    fontWeight: theme.typography.weight.bold,
-    borderTop: "1px solid ".concat(theme.appBorderColor),
-    borderLeft: "1px solid ".concat(theme.appBorderColor),
-    marginLeft: -1,
-    borderRadius: "4px 0 0 0",
-    '&:not(:last-child)': {
-      borderRight: "1px solid ".concat(theme.appBorderColor)
-    },
-    '& + *': {
-      borderLeft: "1px solid ".concat(theme.appBorderColor),
-      borderRadius: 0
-    },
-    '&:focus': {
-      boxShadow: "".concat(theme.color.secondary, " 0 -3px 0 0 inset"),
-      outline: '0 none'
-    }
-  };
-}, function (_ref3) {
-  var disabled = _ref3.disabled;
-  return disabled && {
-    cursor: 'not-allowed',
-    opacity: 0.5
-  };
-});
-
-exports.ActionButton = ActionButton;
-ActionButton.displayName = 'ActionButton';
-
-var ActionBar = function ActionBar(_ref4) {
-  var actionItems = _ref4.actionItems,
-      props = _objectWithoutProperties(_ref4, _excluded);
-
-  return /*#__PURE__*/_react.default.createElement(Container, props, actionItems.map(function (_ref5, index) {
-    var title = _ref5.title,
-        className = _ref5.className,
-        onClick = _ref5.onClick,
-        disabled = _ref5.disabled;
-    return (
-      /*#__PURE__*/
-      // eslint-disable-next-line react/no-array-index-key
-      _react.default.createElement(ActionButton, {
-        key: index,
-        className: className,
-        onClick: onClick,
-        disabled: disabled
-      }, title)
-    );
-  }));
-};
-
-exports.ActionBar = ActionBar;
-ActionBar.displayName = "ActionBar";

package/dist/cjs/ActionBar/ActionBar.stories.js

@@ -1,66 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.SingleItem = exports.ManyItems = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _ActionBar = require("./ActionBar");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var action1 = (0, _addonActions.action)('action1');
-var action2 = (0, _addonActions.action)('action2');
-var action3 = (0, _addonActions.action)('action3');
-var _default = {
-  component: _ActionBar.ActionBar,
-  title: 'Basics/ActionBar',
-  decorators: [function (storyFn) {
-    return /*#__PURE__*/_react.default.createElement("div", {
-      style: {
-        position: 'relative',
-        width: '300px',
-        height: '64px',
-        margin: '1rem',
-        background: 'papayawhip',
-        border: '1px solid rgba(0,0,0,.05)'
-      }
-    }, storyFn());
-  }]
-};
-exports.default = _default;
-
-var SingleItem = function SingleItem() {
-  return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
-    actionItems: [{
-      title: 'Clear',
-      onClick: action1
-    }]
-  });
-};
-
-exports.SingleItem = SingleItem;
-SingleItem.displayName = "SingleItem";
-
-var ManyItems = function ManyItems() {
-  return /*#__PURE__*/_react.default.createElement(_ActionBar.ActionBar, {
-    actionItems: [{
-      title: 'Action string',
-      onClick: action1
-    }, {
-      title: /*#__PURE__*/_react.default.createElement("div", null, "Action node"),
-      onClick: action2
-    }, {
-      title: 'Long action string',
-      className: 'long-action-button',
-      onClick: action3
-    }]
-  });
-};
-
-exports.ManyItems = ManyItems;
-ManyItems.displayName = "ManyItems";

package/dist/cjs/Badge/Badge.js

@@ -1,97 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Badge = void 0;
-
-require("core-js/modules/es.string.bold.js");
-
-require("core-js/modules/es.object.assign.js");
-
-var _react = _interopRequireDefault(require("react"));
-
-var _theming = require("@storybook/theming");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-var BadgeWrapper = _theming.styled.div(function (_ref) {
-  var theme = _ref.theme;
-  return {
-    display: 'inline-block',
-    fontSize: 11,
-    lineHeight: '12px',
-    alignSelf: 'center',
-    padding: '4px 12px',
-    borderRadius: '3em',
-    fontWeight: theme.typography.weight.bold
-  };
-}, {
-  svg: {
-    height: 12,
-    width: 12,
-    marginRight: 4,
-    marginTop: -2,
-    path: {
-      fill: 'currentColor'
-    }
-  }
-}, function (_ref2) {
-  var theme = _ref2.theme,
-      status = _ref2.status;
-
-  switch (status) {
-    case 'critical':
-      {
-        return {
-          color: theme.color.critical,
-          background: theme.background.critical
-        };
-      }
-
-    case 'negative':
-      {
-        return {
-          color: theme.color.negative,
-          background: theme.background.negative
-        };
-      }
-
-    case 'warning':
-      {
-        return {
-          color: theme.color.warning,
-          background: theme.background.warning
-        };
-      }
-
-    case 'neutral':
-      {
-        return {
-          color: theme.color.dark,
-          background: theme.color.mediumlight
-        };
-      }
-
-    case 'positive':
-      {
-        return {
-          color: theme.color.positive,
-          background: theme.background.positive
-        };
-      }
-
-    default:
-      {
-        return {};
-      }
-  }
-});
-
-var Badge = function Badge(_ref3) {
-  var props = Object.assign({}, _ref3);
-  return /*#__PURE__*/_react.default.createElement(BadgeWrapper, props);
-};
-
-exports.Badge = Badge;
-Badge.displayName = "Badge";

package/dist/cjs/Badge/Badge.stories.js

@@ -1,19 +0,0 @@
-"use strict";
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _Badge = require("./Badge");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-(0, _react2.storiesOf)('Basics/Badge', module).add('all badges', function () {
-  return /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
-    status: "positive"
-  }, "Positive"), /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
-    status: "negative"
-  }, "Negative"), /*#__PURE__*/_react.default.createElement(_Badge.Badge, {
-    status: "neutral"
-  }, "Neutral"));
-});

package/dist/cjs/Button/Button.js

@@ -1,281 +0,0 @@
-"use strict";
-
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
-require("core-js/modules/es.object.keys.js");
-
-require("core-js/modules/es.symbol.js");
-
-require("core-js/modules/es.array.iterator.js");
-
-require("core-js/modules/es.object.to-string.js");
-
-require("core-js/modules/es.string.iterator.js");
-
-require("core-js/modules/es.weak-map.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.description.js");
-
-require("core-js/modules/es.symbol.iterator.js");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Button = void 0;
-
-require("core-js/modules/es.string.small.js");
-
-require("core-js/modules/es.string.bold.js");
-
-require("core-js/modules/es.object.assign.js");
-
-require("core-js/modules/es.array.concat.js");
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _theming = require("@storybook/theming");
-
-var _polished = require("polished");
-
-var _excluded = ["isLink", "children"];
-
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
-
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && 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 _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 ButtonWrapper = _theming.styled.button(function (_ref) {
-  var small = _ref.small,
-      theme = _ref.theme;
-  return {
-    border: 0,
-    borderRadius: '3em',
-    cursor: 'pointer',
-    display: 'inline-block',
-    overflow: 'hidden',
-    padding: small ? '8px 16px' : '13px 20px',
-    position: 'relative',
-    textAlign: 'center',
-    textDecoration: 'none',
-    transition: 'all 150ms ease-out',
-    transform: 'translate3d(0,0,0)',
-    verticalAlign: 'top',
-    whiteSpace: 'nowrap',
-    userSelect: 'none',
-    opacity: 1,
-    margin: 0,
-    background: 'transparent',
-    fontSize: "".concat(small ? theme.typography.size.s1 : theme.typography.size.s2 - 1, "px"),
-    fontWeight: theme.typography.weight.bold,
-    lineHeight: '1',
-    svg: {
-      display: 'inline-block',
-      height: small ? 14 : 16,
-      width: small ? 14 : 16,
-      verticalAlign: 'top',
-      marginRight: small ? 4 : 6,
-      marginTop: small ? -1 : -2,
-      marginBottom: small ? -1 : -2,
-
-      /* Necessary for js mouse events to not glitch out when hovering on svgs */
-      pointerEvents: 'none',
-      path: {
-        fill: 'currentColor'
-      }
-    }
-  };
-}, function (_ref2) {
-  var disabled = _ref2.disabled;
-  return disabled ? {
-    cursor: 'not-allowed !important',
-    opacity: 0.5,
-    '&:hover': {
-      transform: 'none'
-    }
-  } : {};
-}, function (_ref3) {
-  var containsIcon = _ref3.containsIcon,
-      small = _ref3.small;
-  return containsIcon ? Object.assign({
-    svg: {
-      display: 'block',
-      margin: 0
-    }
-  }, small ? {
-    padding: 9
-  } : {
-    padding: 12
-  }) : {};
-}, function (_ref4) {
-  var theme = _ref4.theme,
-      primary = _ref4.primary,
-      secondary = _ref4.secondary,
-      gray = _ref4.gray;
-  var color;
-
-  if (gray) {
-    color = theme.color.medium;
-  } else if (secondary) {
-    color = theme.color.secondary;
-  } else if (primary) {
-    color = theme.color.primary;
-  }
-
-  return color ? {
-    background: color,
-    color: gray ? theme.color.darkest : theme.color.lightest,
-    '&:hover': {
-      background: (0, _polished.darken)(0.05, color)
-    },
-    '&:active': {
-      boxShadow: 'rgba(0, 0, 0, 0.1) 0 0 0 3em inset'
-    },
-    '&:focus': {
-      boxShadow: "".concat((0, _polished.rgba)(color, 1), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-}, function (_ref5) {
-  var theme = _ref5.theme,
-      tertiary = _ref5.tertiary,
-      inForm = _ref5.inForm,
-      small = _ref5.small;
-  return tertiary ? Object.assign({
-    background: theme.base === 'light' ? (0, _polished.darken)(0.02, theme.input.background) : (0, _polished.lighten)(0.02, theme.input.background),
-    color: theme.input.color,
-    boxShadow: "".concat(theme.input.border, " 0 0 0 1px inset"),
-    borderRadius: theme.input.borderRadius
-  }, inForm && small ? {
-    padding: '10px 16px'
-  } : {}, {
-    '&:hover': Object.assign({
-      background: theme.base === 'light' ? (0, _polished.darken)(0.05, theme.input.background) : (0, _polished.lighten)(0.05, theme.input.background)
-    }, inForm ? {} : {
-      boxShadow: 'rgba(0,0,0,.2) 0 2px 6px 0, rgba(0,0,0,.1) 0 0 0 1px inset'
-    }),
-    '&:active': {
-      background: theme.input.background
-    },
-    '&:focus': {
-      boxShadow: "".concat((0, _polished.rgba)(theme.color.secondary, 1), " 0 0 0 1px inset"),
-      outline: 'none'
-    }
-  }) : {};
-}, function (_ref6) {
-  var theme = _ref6.theme,
-      outline = _ref6.outline;
-  return outline ? {
-    boxShadow: "".concat((0, _polished.transparentize)(0.8, theme.color.defaultText), " 0 0 0 1px inset"),
-    color: (0, _polished.transparentize)(0.3, theme.color.defaultText),
-    background: 'transparent',
-    '&:hover, &:focus': {
-      boxShadow: "".concat((0, _polished.transparentize)(0.5, theme.color.defaultText), " 0 0 0 1px inset"),
-      outline: 'none'
-    },
-    '&:active': {
-      boxShadow: "".concat((0, _polished.transparentize)(0.5, theme.color.defaultText), " 0 0 0 2px inset"),
-      color: (0, _polished.transparentize)(0, theme.color.defaultText)
-    }
-  } : {};
-}, function (_ref7) {
-  var theme = _ref7.theme,
-      outline = _ref7.outline,
-      primary = _ref7.primary;
-  var color = theme.color.primary;
-  return outline && primary ? {
-    boxShadow: "".concat(color, " 0 0 0 1px inset"),
-    color: color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.4), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-}, function (_ref8) {
-  var theme = _ref8.theme,
-      outline = _ref8.outline,
-      primary = _ref8.primary,
-      secondary = _ref8.secondary;
-  var color;
-
-  if (secondary) {
-    color = theme.color.secondary;
-  } else if (primary) {
-    color = theme.color.primary;
-  }
-
-  return outline && color ? {
-    boxShadow: "".concat(color, " 0 0 0 1px inset"),
-    color: color,
-    'svg path': {
-      fill: color
-    },
-    '&:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      background: 'transparent'
-    },
-    '&:active': {
-      background: color,
-      boxShadow: "".concat(color, " 0 0 0 1px inset"),
-      color: theme.color.tertiary
-    },
-    '&:focus': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.4), " 0 1px 9px 2px"),
-      outline: 'none'
-    },
-    '&:focus:hover': {
-      boxShadow: "".concat(color, " 0 0 0 1px inset, ").concat((0, _polished.rgba)(color, 0.2), " 0 8px 18px 0px")
-    }
-  } : {};
-});
-
-var ButtonLink = ButtonWrapper.withComponent('a', {
-  target: "ex9hp6v0",
-  label: "ButtonLink"
-});
-var Button = Object.assign( /*#__PURE__*/(0, _react.forwardRef)(function (_ref9, ref) {
-  var isLink = _ref9.isLink,
-      children = _ref9.children,
-      props = _objectWithoutProperties(_ref9, _excluded);
-
-  if (isLink) {
-    return /*#__PURE__*/_react.default.createElement(ButtonLink, _extends({}, props, {
-      ref: ref
-    }), children);
-  }
-
-  return /*#__PURE__*/_react.default.createElement(ButtonWrapper, _extends({}, props, {
-    ref: ref
-  }), children);
-}), {
-  defaultProps: {
-    isLink: false
-  }
-});
-exports.Button = Button;