@spothero/ui 22.3.2 → 22.3.9-beta.0

package/package.json

@@ -1,33 +1,24 @@
 {
   "name": "@spothero/ui",
-  "version": "22.3.2",
+  "version": "22.3.9-beta.0",
   "description": "SpotHero's React component UI library.",
-  "main": "./dist/components/index.js",
-  "exports": "./dist/components/index.js",
+  "main": "./dist/index.cjs.js",
+  "module": "./dist/index.esm.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./package.json": "./package.json"
+  },
   "repository": "https://github.com/spothero/fe-monorepo",
   "files": [
     "dist"
   ],
-  "babel": {
-    "presets": [
-      "@spothero/spothero"
-    ],
-    "plugins": [
-      [
-        "module-resolver",
-        {
-          "alias": {
-            "components": "./src/components",
-            "theme": "./src/theme",
-            "utils": "./src/utils"
-          }
-        }
-      ]
-    ]
+  "browserslist": {
+    "target": "web",
+    "extends": "@spothero/browserslist-config"
   },
-  "browserslist": [
-    "extends @spothero/browserslist-config"
-  ],
   "prettier": "@spothero/prettier-config",
   "stylelint": {
     "extends": [
@@ -54,13 +45,21 @@
     ]
   },
   "devDependencies": {
+    "rollup": "^4.28.1",
+    "rollup-plugin-dts": "^6.1.1",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
     "@babel/cli": "7.23.9",
     "@babel/core": "7.23.9",
     "@babel/runtime-corejs3": "7.14.7",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/react": "6.5.16",
+    "@emotion/is-prop-valid": "^1.3.1",
+    "@storybook/addon-a11y": "7.6.19",
+    "@storybook/addon-actions": "7.6.19",
+    "@storybook/addon-essentials": "7.6.19",
+    "@storybook/addon-links": "7.6.19",
+    "@storybook/components": "7.6.19",
+    "@storybook/react": "7.6.19",
+    "@storybook/react-webpack5": "7.6.19",
+    "@storybook/theming": "7.6.19",
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "12.8.1",
@@ -70,12 +69,13 @@
     "babel-plugin-module-resolver": "5.0.0",
     "chalk": "4.1.0",
     "classnames": "2.2.6",
+    "css-loader": "5.1.3",
     "eslint-loader": "4.0.2",
     "get-contrast-ratio": "0.2.1",
     "jest": "28.1.2",
     "jest-chain": "1.1.5",
-    "jest-environment-jsdom": "28.1.2",
     "jest-date-mock": "1.0.8",
+    "jest-environment-jsdom": "28.1.2",
     "jest-extended": "3.2.4",
     "jest-watch-typeahead": "0.6.1",
     "lodash": "4.17.21",
@@ -89,35 +89,35 @@
     "react-redux": "7.2.8",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.7",
+    "sass-loader": "10.2.1",
     "start-server-and-test": "1.12.6",
+    "storybook": "7.6.19",
     "style-loader": "1.2.1",
     "webpack-merge": "5.1.4",
-    "css-loader": "5.1.3",
-    "sass-loader": "10.2.1",
-    "@spothero/browserslist-config": "4.0.0",
     "@spothero/babel-preset-spothero": "5.1.0",
+    "@spothero/browserslist-config": "4.0.0",
     "@spothero/core": "7.0.1",
-    "@spothero/icons": "9.0.2-beta.0",
     "@spothero/eslint-config": "6.1.0",
+    "@spothero/icons": "9.0.3-beta.0",
+    "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",
-    "@spothero/stylelint-config": "6.0.0",
-    "@spothero/npm-publisher": "7.0.0"
+    "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
+    "@babel/preset-env": "7.23.9",
     "@chakra-ui/react": "1.8.8",
     "@chakra-ui/theme": "1.14.1",
     "@chakra-ui/theme-tools": "1.3.6",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
     "@faker-js/faker": "7.6.0",
-    "@storybook/addon-a11y": "6.5.16",
     "core-js": "3.6.5",
     "framer-motion": "4.1.17",
     "react-select": "5.4.0",
     "regenerator-runtime": "0.13.7",
     "ssr-window": "1.0.1",
     "transitionEnd": "1.0.2",
-    "@spothero/utils": "15.0.2-beta.0"
+    "@spothero/utils": "15.0.2"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",
@@ -131,15 +131,14 @@
   "scripts": {
     "clean": "rm -rf docs v2 lib styles coverage || true",
     "lint": "eslint .storybook src --ext .jsx,.js",
-    "start": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "start": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
     "test": "pnpm run test:unit",
     "test:template": "NODE_ENV=test jest --config ./jest.config.json --bail --silent",
     "test:unit": "pnpm run test:template",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 pnpm run test:template -- --watch",
-    "build:v2": "BABEL_ENV=production babel src -d dist",
-    "build": "pnpm run clean && pnpm run build:v2",
+    "build": "pnpm run clean && rollup -c --bundleConfigAsCjs",
     "release": "npm-release",
-    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider build-storybook -o ./docs/v2",
-    "publish-storybook": "pnpm run build:storybook"
+    "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build -o ./docs/v2",
+    "publish-storybook": "pnpm run build-storybook"
   }
 }

package/dist/components/Accordion/Accordion.stories.js

@@ -1,91 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Accordion = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@chakra-ui/react");
-var _faker = require("@faker-js/faker");
-var _Text = _interopRequireDefault(require("../Text/Text"));
-var _Heading = _interopRequireDefault(require("../Heading/Heading"));
-var _createControl = require("storybook/utils/create-control");
-var _index = require("./index");
-var _default = exports.default = {
-  title: 'v2/Accordion',
-  parameters: {
-    removeBaseHtmlClass: true
-  }
-};
-const AccordionTemplate = ({
-  index,
-  variant,
-  allowToggle,
-  accordionText,
-  allowMultiple
-}) => {
-  const multipleOptions = allowMultiple ? {
-    allowMultiple,
-    defaultIndex: index
-  } : '';
-  const toggleOptions = allowToggle ? {
-    allowToggle
-  } : '';
-  const handleOnClick = () => {
-    // eslint-disable-next-line no-alert
-    alert('Hello World');
-  };
-  return /*#__PURE__*/_react.default.createElement(_index.Accordion, (0, _extends2.default)({}, toggleOptions, multipleOptions, {
-    variant: variant
-  }), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
-    as: "h3"
-  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    flex: "1",
-    textAlign: "left"
-  }, "Default Accordion"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
-    as: "h3"
-  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null), /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    flex: "1",
-    textAlign: "left"
-  }, "Right Aligned Accordion Icon"))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))), /*#__PURE__*/_react.default.createElement(_index.AccordionItem, null, /*#__PURE__*/_react.default.createElement(_Heading.default, {
-    as: "h3"
-  }, /*#__PURE__*/_react.default.createElement(_index.AccordionButton, null, /*#__PURE__*/_react.default.createElement(_react2.Box, {
-    flex: "1",
-    textAlign: "left"
-  }, "Accordion with Additional Action Button"), /*#__PURE__*/_react.default.createElement(_index.AccordionActionButton, {
-    onClick: handleOnClick
-  }, "Action"), /*#__PURE__*/_react.default.createElement(_index.AccordionIcon, null))), /*#__PURE__*/_react.default.createElement(_index.AccordionPanel, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, accordionText))));
-};
-const Accordion = exports.Accordion = AccordionTemplate.bind({});
-Accordion.argTypes = {
-  accordionText: {
-    control: {
-      type: 'text'
-    }
-  },
-  allowMultiple: {
-    control: {
-      type: 'boolean'
-    }
-  },
-  allowToggle: {
-    control: {
-      type: 'boolean'
-    }
-  },
-  index: {
-    control: {
-      type: 'number'
-    }
-  },
-  ...(0, _createControl.createSelectControl)('variant', ['lined', 'contained'])
-};
-Accordion.args = {
-  accordionText: _faker.faker.random.words(100),
-  allowMultiple: true,
-  allowToggle: true,
-  index: [0],
-  variant: 'lined'
-};

package/dist/components/Accordion/AccordionActionButton.js

@@ -1,29 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _react = require("@chakra-ui/react");
-var _react2 = _interopRequireWildcard(require("react"));
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const AccordionActionButton = /*#__PURE__*/(0, _react2.forwardRef)(({
-  children,
-  onClick
-}, ref) => {
-  const handleOnClick = e => {
-    if (onClick) {
-      e.preventDefault();
-    }
-    onClick?.();
-  };
-  return /*#__PURE__*/_react2.default.createElement(_react.Box, {
-    ref: ref,
-    fontSize: "sm",
-    role: "button",
-    onClick: handleOnClick,
-    color: "primary.default"
-  }, children);
-});
-var _default = exports.default = AccordionActionButton;

package/dist/components/Accordion/index.js

@@ -1,44 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "Accordion", {
-  enumerable: true,
-  get: function () {
-    return _react.Accordion;
-  }
-});
-Object.defineProperty(exports, "AccordionActionButton", {
-  enumerable: true,
-  get: function () {
-    return _AccordionActionButton.default;
-  }
-});
-Object.defineProperty(exports, "AccordionButton", {
-  enumerable: true,
-  get: function () {
-    return _react.AccordionButton;
-  }
-});
-Object.defineProperty(exports, "AccordionIcon", {
-  enumerable: true,
-  get: function () {
-    return _react.AccordionIcon;
-  }
-});
-Object.defineProperty(exports, "AccordionItem", {
-  enumerable: true,
-  get: function () {
-    return _react.AccordionItem;
-  }
-});
-Object.defineProperty(exports, "AccordionPanel", {
-  enumerable: true,
-  get: function () {
-    return _react.AccordionPanel;
-  }
-});
-var _AccordionActionButton = _interopRequireDefault(require("./AccordionActionButton"));
-var _react = require("@chakra-ui/react");

package/dist/components/Accordion/styles/index.js

@@ -1,76 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _merge = _interopRequireDefault(require("lodash/merge"));
-var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
-const baseStyle = {
-  icon: {
-    color: 'primary.default'
-  },
-  button: {
-    display: 'flex',
-    gridGap: 3.5,
-    alignItems: 'center',
-    fontSize: 'sm',
-    fontWeight: 'semibold',
-    _hover: {
-      backgroundColor: 'gray.50'
-    }
-  },
-  container: {
-    borderColor: 'gray.medium'
-  }
-};
-const variants = {
-  lined: {
-    button: {
-      px: 2,
-      py: 3
-    },
-    container: {
-      borderTopWidth: 1,
-      _last: {
-        borderBottomWidth: 1
-      }
-    },
-    panel: {
-      px: 2,
-      py: 3
-    }
-  },
-  contained: {
-    button: {
-      px: 4,
-      py: 3
-    },
-    container: {
-      borderLeftWidth: 1,
-      borderRightWidth: 1,
-      _first: {
-        borderTopLeftRadius: 4,
-        borderTopRightRadius: 4
-      },
-      _last: {
-        borderBottomLeftRadius: 4,
-        borderBottomRightRadius: 4
-      }
-    },
-    panel: {
-      p: 4,
-      borderColor: 'gray.medium',
-      borderTopWidth: 1
-    }
-  }
-};
-const defaultProps = {
-  variant: 'lined'
-};
-var _default = exports.default = (0, _merge.default)(_theme.default.components.Accordion, {
-  variants,
-  baseStyle,
-  defaultProps
-});

package/dist/components/Alert/Alert.js

@@ -1,83 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireWildcard(require("react"));
-var _merge = _interopRequireDefault(require("lodash/merge"));
-var _react2 = require("@chakra-ui/react");
-var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
-var _x = _interopRequireDefault(require("@spothero/icons/x"));
-var _infoCircleFilled = _interopRequireDefault(require("@spothero/icons/info-circle-filled"));
-var _exclamationCircleFilled = _interopRequireDefault(require("@spothero/icons/exclamation-circle-filled"));
-var _checkmarkCircleFilled = _interopRequireDefault(require("@spothero/icons/checkmark-circle-filled"));
-var _Button = _interopRequireDefault(require("../Button/Button"));
-var _Icon = _interopRequireDefault(require("../Icon/Icon"));
-var _notifications = require("../../theme/base/notifications");
-function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-const statusIconMapping = {
-  [_notifications.NOTIFICATION_STATUSES.WARNING]: _exclamationCircleFilled.default,
-  [_notifications.NOTIFICATION_STATUSES.SUCCESS]: _checkmarkCircleFilled.default,
-  [_notifications.NOTIFICATION_STATUSES.ERROR]: _exclamationCircleFilled.default,
-  [_notifications.NOTIFICATION_STATUSES.NEUTRAL]: _infoCircleFilled.default
-};
-const Alert = /*#__PURE__*/(0, _react.forwardRef)(({
-  status,
-  title,
-  buttonProps,
-  buttonText,
-  buttonOnBottom,
-  showDismiss,
-  onDismissClick,
-  showIcon,
-  description,
-  icon,
-  ...props
-}, ref) => {
-  const IconVariant = icon || statusIconMapping[status];
-  // the issue with storybook breaking with hooks is still a problem, but once that's resolved this should be memoized
-  const style = (0, _merge.default)({
-    ..._theme.default.components.Alert.baseStyle
-  }, _notifications.notificationBaseStyle, (0, _notifications.notificationStatusStyles)(status), (0, _notifications.notificationSizeStyles)(props.size));
-  return /*#__PURE__*/_react.default.createElement(_react2.Alert, (0, _extends2.default)({}, style.container, {
-    "data-status": status
-  }, props, {
-    ref: ref
-  }), showIcon ? /*#__PURE__*/_react.default.createElement(_Icon.default, (0, _extends2.default)({}, style.icon, {
-    as: IconVariant
-  })) : null, /*#__PURE__*/_react.default.createElement(_react2.VStack, {
-    spacing: 0,
-    alignItems: "flex-start"
-  }, title ? /*#__PURE__*/_react.default.createElement(_react2.AlertTitle, style.title, title) : null, description ? /*#__PURE__*/_react.default.createElement(_react2.AlertDescription, style.description, description) : null, buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
-    variant: "tertiary"
-  }, buttonProps), buttonText) : null), /*#__PURE__*/_react.default.createElement(_react2.Flex, {
-    alignItems: "center",
-    marginLeft: "auto"
-  }, !buttonOnBottom && buttonText && buttonProps ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.actionButton, {
-    variant: "tertiary"
-  }, buttonProps), buttonText) : null, showDismiss ? /*#__PURE__*/_react.default.createElement(_Button.default, (0, _extends2.default)({}, style.dismissButton, {
-    onClick: onDismissClick
-  }), /*#__PURE__*/_react.default.createElement(_Icon.default, {
-    width: 6,
-    height: "auto",
-    as: _x.default
-  })) : null));
-});
-Alert.defaultProps = {
-  status: 'neutral',
-  title: null,
-  buttonProps: null,
-  buttonText: null,
-  buttonOnBottom: false,
-  showDismiss: false,
-  onDismissClick: null,
-  showIcon: true,
-  description: null,
-  size: 'md',
-  icon: null
-};
-var _default = exports.default = Alert;

package/dist/components/Alert/Alert.stories.js

@@ -1,49 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = exports.Alert = void 0;
-var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
-var _react = _interopRequireDefault(require("react"));
-var _react2 = require("@chakra-ui/react");
-var _createControl = require("storybook/utils/create-control");
-var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
-var _Alert = _interopRequireDefault(require("./Alert"));
-var _default = exports.default = {
-  title: 'v2/Alert',
-  component: _Alert.default,
-  parameters: {
-    removeBaseHtmlClass: true
-  }
-};
-const AlertTemplate = props => /*#__PURE__*/_react.default.createElement(_react2.VStack, {
-  alignItems: "flex-start"
-}, /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Success"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
-  status: "success"
-}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Error"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
-  status: "error"
-}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Warning"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
-  status: "warning"
-}, props)), /*#__PURE__*/_react.default.createElement(_react2.Text, null, "Status: Neutral"), /*#__PURE__*/_react.default.createElement(_Alert.default, (0, _extends2.default)({
-  status: "neutral"
-}, props)));
-const Alert = exports.Alert = AlertTemplate.bind({});
-Alert.argTypes = {
-  ...(0, _createControl.createSelectControl)('size', ['sm', 'md', 'lg']),
-  ...(0, _disableArgs.default)(['buttonProps', 'onDismissClick', 'status'])
-};
-Alert.args = {
-  title: 'Hello',
-  buttonOnBottom: false,
-  buttonText: 'Action',
-  description: 'This is an alert.',
-  buttonProps: {
-    onClick: () => console.log('Action clicked')
-  },
-  showDismiss: true,
-  onDismissClick: () => console.log('dismissed'),
-  showIcon: true,
-  size: 'md'
-};

package/dist/components/Alert/index.js

@@ -1,13 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-Object.defineProperty(exports, "default", {
-  enumerable: true,
-  get: function () {
-    return _Alert.default;
-  }
-});
-var _Alert = _interopRequireDefault(require("./Alert"));