@spothero/ui 22.5.3 → 23.0.0

package/dist/theme/base/sizes.js

@@ -0,0 +1,89 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var container = {
+  base: '100%',
+  // 640px
+  tablet: '45rem',
+  // 720px
+  desktop: '72rem' // 1152px
+};
+var sizes = {
+  container: container,
+  0: '0',
+  0.5: '0.125rem',
+  // 2px
+  1: '0.25rem',
+  // 4px
+  1.5: '0.375rem',
+  // 6px
+  2: '0.5rem',
+  // 8px
+  2.5: '0.625rem',
+  // 10px
+  3: '0.75rem',
+  // 12px
+  3.5: '0.875rem',
+  // 14px
+  4: '1rem',
+  // 16px
+  5: '1.25rem',
+  // 20px
+  5.5: '1.375rem',
+  // 22px
+  6: '1.5rem',
+  // 24px
+  7: '1.75rem',
+  // 28px
+  8: '2rem',
+  // 32px
+  9: '2.25rem',
+  // 36px
+  10: '2.5rem',
+  // 40px
+  12: '3rem',
+  // 48px
+  14: '3.5rem',
+  // 56px
+  16: '4rem',
+  // 64px
+  20: '5rem',
+  // 80px
+  24: '6rem',
+  // 96px
+  28: '7rem',
+  // 112px
+  32: '8rem',
+  // 128px
+  36: '9rem',
+  // 144px
+  40: '10rem',
+  // 160px
+  44: '11rem',
+  // 176px
+  48: '12rem',
+  // 192px
+  52: '13rem',
+  // 208px
+  56: '14rem',
+  // 224px
+  60: '15rem',
+  // 240px
+  64: '16rem',
+  // 256px
+  72: '18rem',
+  // 272px
+  80: '20rem',
+  // 288px
+  96: '24rem',
+  // 384px
+  px: '1px',
+  full: '100%',
+  max: 'max-content',
+  min: 'min-content'
+};
+var _default = exports["default"] = sizes;

package/dist/theme/base/typography.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.fonts = exports.fontWeights = exports.fontSizes = void 0;
+var fonts = exports.fonts = {
+  heading: "\"Plus Jakarta Sans\", sans-serif",
+  body: "\"Plus Jakarta Sans\", sans-serif"
+};
+var fontSizes = exports.fontSizes = {
+  '5xl': '3.5rem',
+  // 56px
+  '4xl': '3rem',
+  // 48px
+  '3xl': '2.5rem',
+  // 40px
+  '2xl': '2rem',
+  // 32px
+  xl: '1.5rem',
+  // 24px
+  lg: '1.25rem',
+  // 20px
+  md: '1.125rem',
+  // 18px
+  base: '1rem',
+  // 16px
+  sm: '0.875rem',
+  // 14px
+  xs: '0.75rem' // 12px
+};
+var fontWeights = exports.fontWeights = {
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700
+};

package/dist/theme/base/zindices.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var indices = {
+  hide: -100,
+  // equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
+  auto: 'auto',
+  base: 0,
+  // equivalent to $z-index-back in fe-core
+  layer1: 100,
+  // equivalent to $z-index-mid in fe-core
+  layer2: 200,
+  // equivalent to $z-index-fore in fe-core
+  layer3: 300,
+  // equivalent to $z-index-layer1 in fe-core
+  layer4: 400,
+  // equivalent to $z-index-layer2 in fe-core
+  layer5: 500,
+  // equivalent to $z-index-layer3 in fe-core
+  layer6: 600,
+  // equivalent to $z-index-layer4 in fe-core
+  layer7: 700,
+  // equivalent to $z-index-modal-shim in fe-core
+  layer8: 800,
+  // equivalent to $z-index-modal in fe-core
+  layer9: 900,
+  // equivalent to $z-index-notification in fe-core
+  layer10: 1000 // equivalent to $z-index-top in fe-core
+};
+var _default = exports["default"] = indices;

package/dist/theme/global.js

@@ -0,0 +1,39 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.LegacyOverrides = exports.Fonts = void 0;
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+var _react = _interopRequireDefault(require("react"));
+var _react2 = require("@emotion/react");
+var _base = require("./base");
+var global = {
+  'html, body': {
+    color: 'text.primary.light'
+  },
+  // By default, Chakra has all svgs set to 'display: block',
+  // this breaks the layout of some older components, so now
+  // we set all svgs to 'display: inline-block;' and only set
+  // 'display: block;' on the components that need it
+  // (as of 3/9/2021 only the v1 AutoSuggestInput component
+  // needed this update)
+  svg: {
+    display: 'inline-block'
+  }
+};
+var _default = exports["default"] = global;
+var Fonts = exports.Fonts = function Fonts() {
+  return /*#__PURE__*/_react["default"].createElement(_react2.Global, {
+    styles: "\n            @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:ital,wght@0,200..800;1,200..800&display=swap');\n            /* latin-ext */\n            @font-face {\n                font-family: \"Plus Jakarta Sans\", sans-serif;\n                font-style: normal;\n                font-weight: 700;\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: \"Plus Jakarta Sans\", sans-serif;\n                font-style: normal;\n                font-weight: 600;\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: \"Plus Jakarta Sans\", sans-serif;\n                font-style: normal;\n                font-weight: 400;\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n            /* latin-ext */\n            @font-face {\n                font-family: \"Plus Jakarta Sans\", sans-serif;\n                font-style: normal;\n                font-weight: 300;\n                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;\n            }\n        "
+  });
+};
+var LegacyOverrides = exports.LegacyOverrides = function LegacyOverrides(_ref) {
+  var _context, _context2, _context3, _context4, _context5, _context6;
+  var useLegacyOverrides = _ref.useLegacyOverrides;
+  return useLegacyOverrides ? /*#__PURE__*/_react["default"].createElement(_react2.Global, {
+    styles: (0, _concat["default"])(_context = (0, _concat["default"])(_context2 = (0, _concat["default"])(_context3 = (0, _concat["default"])(_context4 = (0, _concat["default"])(_context5 = (0, _concat["default"])(_context6 = "\n        h1,\n        h2,\n        h3,\n        h4,\n        h5,\n        h6 {\n            margin-top: 0;\n            font-weight: ".concat(_base.fontWeights.semibold, ";\n        }\n\n        .heading-sm {\n            font-size: ")).call(_context6, _base.fontSizes.base, ";\n        }\n        .heading-md {\n            font-size: ")).call(_context5, _base.fontSizes.md, ";\n        }\n        .heading-lg {\n            font-size: ")).call(_context4, _base.fontSizes['5xl'], ";\n        }\n\n        p {\n            line-height: 1.5;\n        }\n\n        a {\n            outline: none;\n            text-align: left;\n            color: ")).call(_context3, _base.colors.primary["default"], ";\n            text-decoration: none;\n\n            &:active,\n            &:focus {\n                outline: none;\n            }\n\n            &:hover {\n                color: ")).call(_context2, _base.colors.primary['700'], ";\n            }\n        }\n\n        small {\n            font-size: ")).call(_context, _base.fontSizes.xs, ";\n        }\n\n        ")
+  }) : null;
+};

package/dist/theme/index.js

@@ -0,0 +1,45 @@
+"use strict";
+
+var _typeof = require("@babel/runtime-corejs3/helpers/typeof");
+var _Object$keys = require("@babel/runtime-corejs3/core-js-stable/object/keys");
+var _Object$getOwnPropertySymbols = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols");
+var _filterInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/filter");
+var _Object$getOwnPropertyDescriptor = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptor");
+var _forEachInstanceProperty = require("@babel/runtime-corejs3/core-js-stable/instance/for-each");
+var _Object$getOwnPropertyDescriptors = require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-descriptors");
+var _Object$defineProperties = require("@babel/runtime-corejs3/core-js-stable/object/define-properties");
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _WeakMap = require("@babel/runtime-corejs3/core-js-stable/weak-map");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/defineProperty"));
+var _global = _interopRequireDefault(require("./global"));
+var base = _interopRequireWildcard(require("./base"));
+var _react = require("@chakra-ui/react");
+var _theme = _interopRequireDefault(require("@chakra-ui/theme"));
+var components = _interopRequireWildcard(require("../components/styles"));
+function _getRequireWildcardCache(e) { if ("function" != typeof _WeakMap) return null; var r = new _WeakMap(), t = new _WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+function ownKeys(e, r) { var t = _Object$keys(e); if (_Object$getOwnPropertySymbols) { var o = _Object$getOwnPropertySymbols(e); r && (o = _filterInstanceProperty(o).call(o, function (r) { return _Object$getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var _context, _context2; var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? _forEachInstanceProperty(_context = ownKeys(Object(t), !0)).call(_context, function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : _Object$getOwnPropertyDescriptors ? _Object$defineProperties(e, _Object$getOwnPropertyDescriptors(t)) : _forEachInstanceProperty(_context2 = ownKeys(Object(t))).call(_context2, function (r) { _Object$defineProperty(e, r, _Object$getOwnPropertyDescriptor(t, r)); }); } return e; } // import merge from 'lodash/merge';
+// use this to extend the base theme of chakra, this adds on top of what is defined in baseConfig
+var extendedTheme = {
+  initialColorMode: 'light',
+  useSystemColorMode: false,
+  styles: {
+    global: _global["default"]
+  },
+  remToPixels: function remToPixels(rem) {
+    var baseSize = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 16;
+    return !rem ? 0 : "".concat(baseSize * Number(rem.replace('rem', '')));
+  }
+};
+
+// use this to override base themes from Chakra
+var baseConfig = _objectSpread(_objectSpread(_objectSpread({}, _theme["default"]), base), {}, {
+  components: components
+});
+var _default = exports["default"] = (0, _react.extendTheme)(extendedTheme, baseConfig);

package/dist/utils/Spaces.js

@@ -0,0 +1,21 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var _fill = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/fill"));
+var _react = _interopRequireDefault(require("react"));
+var Spaces = function Spaces(_ref) {
+  var _context;
+  var _ref$spaces = _ref.spaces,
+    spaces = _ref$spaces === void 0 ? 3 : _ref$spaces;
+  return /*#__PURE__*/_react["default"].createElement("span", {
+    dangerouslySetInnerHTML: {
+      __html: (0, _fill["default"])(_context = Array(spaces)).call(_context, ' ').join('')
+    }
+  });
+};
+var _default = exports["default"] = Spaces;

package/package.json

@@ -1,20 +1,30 @@
 {
   "name": "@spothero/ui",
-  "version": "22.5.3",
+  "version": "23.0.0",
   "description": "SpotHero's React component UI library.",
-  "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"
-  },
+  "main": "./dist/components/index.js",
+  "exports": "./dist/components/index.js",
   "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"
@@ -48,11 +58,6 @@
     "@babel/cli": "7.23.9",
     "@babel/core": "7.23.9",
     "@babel/runtime-corejs3": "7.14.7",
-    "@emotion/is-prop-valid": "1.3.1",
-    "@rollup/plugin-babel": "6.0.4",
-    "@rollup/plugin-typescript": "12.1.2",
-    "@rollup/plugin-node-resolve": "16.0.0",
-    "@rollup/plugin-commonjs": "28.0.2",
     "@storybook/addon-a11y": "7.6.19",
     "@storybook/addon-actions": "7.6.19",
     "@storybook/addon-essentials": "7.6.19",
@@ -64,8 +69,6 @@
     "@testing-library/jest-dom": "5.11.9",
     "@testing-library/react": "14.0.0",
     "@testing-library/user-event": "12.8.1",
-    "@types/lodash": "4.14.199",
-    "@vitejs/plugin-react": "4.3.4",
     "autoprefixer": "9.8.5",
     "babel-jest": "29.2.2",
     "babel-loader": "8.2.2",
@@ -92,23 +95,18 @@
     "react-redux": "7.2.8",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.7",
-    "rollup": "4.28.1",
-    "rollup-plugin-dts": "6.1.1",
-    "rollup-plugin-peer-deps-external": "2.2.4",
     "sass-loader": "10.2.1",
     "start-server-and-test": "1.12.6",
     "storybook": "7.6.19",
     "style-loader": "1.2.1",
-    "vite-tsconfig-paths": "5.1.4",
-    "vitest": "2.1.8",
     "webpack-merge": "5.1.4",
+    "@spothero/babel-preset-spothero": "5.1.0",
     "@spothero/browserslist-config": "4.0.0",
-    "@spothero/eslint-config": "6.1.0",
     "@spothero/core": "7.0.1",
-    "@spothero/babel-preset-spothero": "5.1.0",
-    "@spothero/icons": "9.1.2",
-    "@spothero/prettier-config": "4.0.0",
+    "@spothero/icons": "9.0.2",
+    "@spothero/eslint-config": "6.1.0",
     "@spothero/npm-publisher": "7.0.0",
+    "@spothero/prettier-config": "4.0.0",
     "@spothero/stylelint-config": "6.0.0"
   },
   "dependencies": {
@@ -124,12 +122,13 @@
     "react-select": "5.4.0",
     "regenerator-runtime": "0.13.7",
     "ssr-window": "1.0.1",
-    "transitionEnd": "1.0.2"
+    "transitionEnd": "1.0.2",
+    "@spothero/utils": "15.0.2"
   },
   "peerDependencies": {
-    "classnames": "2.2.6",
+    "classnames": "^2.2.6",
     "lodash": "4.17.21",
-    "prop-types": "15.7.2",
+    "prop-types": "^15.7.2",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-redux": ">=7.0.0",
@@ -140,11 +139,13 @@
     "lint": "eslint .storybook src --ext .jsx,.js",
     "start": "NODE_OPTIONS=--openssl-legacy-provider storybook dev -p 6006",
     "test": "pnpm run test:unit",
-    "test:unit": "vitest --run",
-    "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 vitest",
-    "build": "pnpm run clean && rollup -c --bundleConfigAsCjs",
+    "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",
     "release": "npm-release",
     "build-storybook": "NODE_OPTIONS=--openssl-legacy-provider storybook build -o ./docs/v2",
-    "publish-storybook": "pnpm run build-storybook"
+    "publish-storybook": "pnpm run build:storybook"
   }
 }

package/dist/AccordionActionButton.d.ts

@@ -1,2 +0,0 @@
-export default AccordionActionButton;
-declare const AccordionActionButton: any;