@spothero/ui 21.0.0 → 21.1.1-beta.0

package/dist/components/Progress/Progress.js

@@ -0,0 +1,39 @@
+"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 _react2 = require("@chakra-ui/react");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+const Progress = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    isRounded,
+    ...props
+  } = _ref;
+  // Passing `isRounded` in as a prop throws a 'React does not recognize the X prop on a DOM element' error. Passing `isRounded` through `sx` instead, allows for the prop to be utilized by the theme without being set on the DOM element, avoiding the error.
+  return /*#__PURE__*/_react.default.createElement(_react2.Progress, (0, _extends2.default)({
+    ref: ref,
+    sx: {
+      isRounded
+    }
+  }, props));
+});
+Progress.defaultProps = {
+  colorScheme: 'primary',
+  hasStripe: false,
+  isAnimated: false,
+  isIndeterminate: false,
+  isRounded: false,
+  max: 100,
+  min: 0,
+  size: 'md',
+  value: 0,
+  variant: 'solid'
+};
+var _default = Progress;
+exports.default = _default;

package/dist/components/Progress/Progress.stories.js

@@ -0,0 +1,81 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Progress = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _disableArgs = _interopRequireDefault(require("storybook/utils/disable-args"));
+var _createControl = require("storybook/utils/create-control");
+var _Progress = _interopRequireDefault(require("./Progress"));
+var _default = {
+  title: 'v2/Progress',
+  component: _Progress.default,
+  parameters: {
+    removeBaseHtmlClass: true,
+    importBy: 'Progress'
+  },
+  argTypes: {
+    colorScheme: {
+      options: ['primary', 'secondary', 'green', 'yellow', 'red', 'gray'],
+      control: {
+        type: 'radio',
+        labels: {
+          primary: 'Primary',
+          secondary: 'Secondary',
+          green: 'Green',
+          yellow: 'Yellow',
+          red: 'Red',
+          gray: 'Gray'
+        }
+      }
+    },
+    ...(0, _disableArgs.default)('min'),
+    ...(0, _disableArgs.default)('max'),
+    size: {
+      options: ['xl', 'lg', 'md', 'sm', 'xs'],
+      control: {
+        type: 'radio',
+        labels: {
+          xl: 'xl',
+          lg: 'lg',
+          md: 'md',
+          sm: 'sm',
+          xs: 'xs'
+        }
+      }
+    },
+    ...(0, _createControl.createRangeControl)({
+      name: 'value',
+      min: 0,
+      max: 100
+    }),
+    variant: {
+      options: ['solid', 'outlined'],
+      control: {
+        type: 'radio',
+        labels: {
+          solid: 'Solid',
+          outlined: 'Outlined'
+        }
+      }
+    }
+  }
+};
+exports.default = _default;
+const ProgressTemplate = args => {
+  return /*#__PURE__*/_react.default.createElement(_Progress.default, args);
+};
+const Progress = ProgressTemplate.bind({});
+exports.Progress = Progress;
+Progress.args = {
+  colorScheme: 'primary',
+  hasStripe: false,
+  isAnimated: false,
+  isIndeterminate: false,
+  isRounded: false,
+  size: 'md',
+  value: 80,
+  variant: 'solid'
+};

package/dist/components/Progress/Progress.styles.js

@@ -0,0 +1,123 @@
+"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"));
+var _themeTools = require("@chakra-ui/theme-tools");
+const filledStyle = props => {
+  const {
+    colorScheme,
+    hasStripe,
+    isIndeterminate,
+    theme
+  } = props;
+  const bgColor = colorScheme === 'gray' ? `${colorScheme}.dark` : `${colorScheme}.default`;
+  const gradient = `linear-gradient(
+      to right,
+      transparent 0%,
+      ${(0, _themeTools.getColor)(theme, bgColor)} 50%,
+      transparent 100%
+    )`;
+  const addStripe = !isIndeterminate && hasStripe;
+  return {
+    ...(addStripe && (0, _themeTools.generateStripe)()),
+    ...(isIndeterminate ? {
+      bgImage: gradient
+    } : {
+      bgColor
+    })
+  };
+};
+const variantOutlined = props => {
+  const {
+    theme: {
+      colors
+    }
+  } = props;
+  return {
+    track: {
+      bg: 'transparent',
+      borderWidth: '1px',
+      borderColor: colors.gray['200']
+    }
+  };
+};
+const variantSolid = props => {
+  const {
+    theme: {
+      colors
+    }
+  } = props;
+  return {
+    track: {
+      bg: colors.gray['100']
+    }
+  };
+};
+const variants = {
+  outlined: variantOutlined,
+  solid: variantSolid
+};
+const sizes = {
+  xl: {
+    track: {
+      height: 10
+    }
+  },
+  lg: {
+    track: {
+      height: 6
+    }
+  },
+  md: {
+    track: {
+      height: 4
+    }
+  },
+  sm: {
+    track: {
+      height: 2
+    }
+  },
+  xs: {
+    track: {
+      height: 1
+    }
+  }
+};
+const defaultProps = {
+  size: 'lg',
+  colorScheme: 'primary',
+  variant: 'solid'
+};
+const overrides = {
+  defaultProps,
+  variants,
+  sizes,
+  baseStyle: props => {
+    const {
+      sx: {
+        isRounded
+      }
+    } = props;
+    return (0, _merge.default)(_theme.default.components.Progress.baseStyle(props), {
+      filledTrack: {
+        borderRightRadius: isRounded ? 'none' : 'base',
+        ...filledStyle(props)
+      },
+      track: {
+        borderRightRadius: isRounded ? 'full' : 'base',
+        borderLeftRadius: isRounded ? 'full' : 'base'
+      }
+    });
+  }
+};
+var _default = {
+  ..._theme.default.components.Progress,
+  ...overrides
+};
+exports.default = _default;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.js

@@ -0,0 +1,61 @@
+"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 = require("@chakra-ui/react");
+var _react2 = _interopRequireWildcard(require("react"));
+var _styles = require("./styles");
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+/**
+ * @example (
+ * <ToggleButton onChange={handleChangeValue} value={value}>
+ *  <Button value={value1}>label1</Button>
+ *  <Button value={value2}>label2</Button>
+ * </ToggleButton>
+ * )
+ * @note
+ * must have multiple child elements
+ */
+// const ToggleButtonGroup = forwardRef(({onChange, value, children, groupProps}, ref) => {
+const ToggleButtonGroup = /*#__PURE__*/(0, _react2.forwardRef)((props, ref) => {
+  const {
+    onChange,
+    value,
+    children,
+    groupProps
+  } = props;
+  if (!children) throw new Error('Children required');
+
+  // iterate over array of child nodes to apply extended props
+  return /*#__PURE__*/_react2.default.createElement(_react.ButtonGroup, (0, _extends2.default)({
+    ref: ref,
+    sx: {
+      ..._styles.buttonGroupStyles
+    }
+  }, groupProps), _react2.default.Children.map(children, CHILD => {
+    return /*#__PURE__*/_react2.default.cloneElement(CHILD, {
+      onClick: () => {
+        if (value === CHILD?.props?.value) return;
+        onChange(CHILD?.props?.value);
+      },
+      ...(value !== CHILD?.props?.value ? {
+        sx: {
+          ..._styles.defaultStyles,
+          ..._styles.inactiveStyles
+        }
+      } : {
+        sx: {
+          ..._styles.defaultStyles,
+          ..._styles.activeStyles
+        }
+      })
+    });
+  }));
+});
+var _default = ToggleButtonGroup;
+exports.default = _default;

package/dist/components/ToggleButtonGroup/ToggleButtonGroup.stories.js

@@ -0,0 +1,49 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ToggleButtonGroup = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _react2 = require("@chakra-ui/react");
+var _Button = require("../Button");
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup"));
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }
+var _default = {
+  title: 'v2/ToggleButtonGroup',
+  displayName: 'ToggleButtonGroup',
+  component: _ToggleButtonGroup.default,
+  parameters: {
+    removeBaseHtmlClass: true
+  }
+};
+/*
+    Storybook's background is white so the ToggleButtonGroup is hard to see.
+    The ToggleButtonGroup is typically displayed against a light green background.
+*/
+exports.default = _default;
+const Template = props => {
+  const [toggleValue, setToggleValue] = (0, _react.useState)("multiple");
+  const onChange = value => {
+    setToggleValue(value);
+  };
+  return /*#__PURE__*/_react.default.createElement(_react2.Box, {
+    backgroundColor: "green.50",
+    padding: 8
+  }, /*#__PURE__*/_react.default.createElement(_ToggleButtonGroup.default, (0, _extends2.default)({}, props, {
+    value: toggleValue,
+    onChange: onChange
+  }), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    key: "single",
+    value: "single"
+  }, "Single Bookings"), /*#__PURE__*/_react.default.createElement(_Button.Button, {
+    key: "multiple",
+    value: "multiple"
+  }, "Multiple Bookings")));
+};
+const ToggleButtonGroup = Template.bind({});
+exports.ToggleButtonGroup = ToggleButtonGroup;
+ToggleButtonGroup.args = {};

package/dist/components/ToggleButtonGroup/index.js

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

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

@@ -0,0 +1,51 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.inactiveStyles = exports.defaultStyles = exports.buttonGroupStyles = exports.activeStyles = void 0;
+const defaultStyles = {
+  border: 0,
+  borderRadius: '4px',
+  fontSize: 'xs',
+  fontWeight: 'normal',
+  paddingX: 4,
+  paddingY: 1,
+  _hover: {
+    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
+  },
+  _focus: {
+    boxShadow: '0 0 0 2px rgba(158, 202, 237, 1)'
+  }
+};
+exports.defaultStyles = defaultStyles;
+const inactiveStyles = {
+  color: 'gray.700',
+  borderColor: 'gray.100',
+  bg: 'gray.100',
+  _hover: {
+    bg: 'gray.100'
+  },
+  _active: {
+    bg: 'gray.100'
+  }
+};
+exports.inactiveStyles = inactiveStyles;
+const activeStyles = {
+  color: 'black',
+  fontWeight: 'semibold',
+  bg: 'white',
+  _hover: {
+    bg: 'white'
+  },
+  _active: {
+    bg: 'white'
+  }
+};
+exports.activeStyles = activeStyles;
+const buttonGroupStyles = {
+  borderRadius: '4px',
+  backgroundColor: 'gray.100',
+  padding: 1
+};
+exports.buttonGroupStyles = buttonGroupStyles;

package/dist/components/index.js

@@ -27,6 +27,7 @@ var _exportNames = {
   Icon: true,
   Image: true,
   Loader: true,
+  Progress: true,
   Checkbox: true,
   Input: true,
   SelectionCard: true,
@@ -39,6 +40,7 @@ var _exportNames = {
   RadioGroup: true,
   AutoSuggestSelect: true,
   Badge: true,
+  ToggleButtonGroup: true,
   Box: true,
   Kbd: true,
   Code: true,
@@ -53,7 +55,6 @@ var _exportNames = {
   VStack: true,
   LinkBox: true,
   Collapse: true,
-  Progress: true,
   useToken: true,
   useTheme: true,
   useToast: true,
@@ -342,7 +343,7 @@ Object.defineProperty(exports, "Portal", {
 Object.defineProperty(exports, "Progress", {
   enumerable: true,
   get: function () {
-    return _react.Progress;
+    return _Progress.default;
   }
 });
 Object.defineProperty(exports, "Radio", {
@@ -453,6 +454,12 @@ Object.defineProperty(exports, "ThemeProvider", {
     return _ThemeProvider.default;
   }
 });
+Object.defineProperty(exports, "ToggleButtonGroup", {
+  enumerable: true,
+  get: function () {
+    return _ToggleButtonGroup.default;
+  }
+});
 Object.defineProperty(exports, "VStack", {
   enumerable: true,
   get: function () {
@@ -619,6 +626,7 @@ var _Card = _interopRequireDefault(require("./Card/Card"));
 var _Icon = _interopRequireDefault(require("./Icon/Icon"));
 var _Image = _interopRequireDefault(require("./Image/Image"));
 var _Loader = _interopRequireDefault(require("./Loader/Loader"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress"));
 var _Checkbox = _interopRequireDefault(require("./Checkbox"));
 var _Input = _interopRequireDefault(require("./Input"));
 var _SelectionCard = require("./SelectionCard");
@@ -627,6 +635,7 @@ var _Popover = require("./Popover");
 var _Radio = require("./Radio");
 var _AutoSuggestSelect = require("./AutoSuggestSelect");
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
+var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
 var _react = require("@chakra-ui/react");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (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; }

package/dist/components/styles.js

@@ -82,6 +82,12 @@ Object.defineProperty(exports, "Popover", {
     return _styles7.default;
   }
 });
+Object.defineProperty(exports, "Progress", {
+  enumerable: true,
+  get: function () {
+    return _Progress.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -150,4 +156,5 @@ var _styles9 = _interopRequireDefault(require("./Modal/styles"));
 var _styles10 = _interopRequireDefault(require("./Radio/styles"));
 var _Skeleton = _interopRequireDefault(require("./Skeleton/Skeleton.styles"));
 var _styles11 = _interopRequireDefault(require("./Badge/styles"));
-var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
+var _styles12 = _interopRequireDefault(require("./Drawer/styles"));
+var _Progress = _interopRequireDefault(require("./Progress/Progress.styles"));

package/dist/theme/base/colors.js

@@ -81,20 +81,14 @@ const red = {
   900: '#901530'
 };
 const colors = {
-  primary: {
-    ...blue,
-    default: blue['500']
-  },
-  secondary: {
-    ...navy,
-    default: navy['900']
-  },
   gray: {
     ...gray,
     light: gray['50'],
     medium: gray['200'],
     dark: gray['600']
   },
+  blue,
+  navy,
   red: {
     ...red,
     default: red['700']
@@ -107,6 +101,14 @@ const colors = {
     ...yellow,
     default: yellow['400']
   },
+  primary: {
+    ...blue,
+    default: blue['500']
+  },
+  secondary: {
+    ...navy,
+    default: navy['900']
+  },
   success: green['700'],
   warning: yellow['400'],
   error: red['700'],

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.0.0",
+  "version": "21.1.1-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -96,9 +96,9 @@
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.0.0",
-    "@spothero/core": "7.0.0",
     "@spothero/browserslist-config": "4.0.0",
     "@spothero/eslint-config": "6.0.0",
+    "@spothero/core": "7.0.0",
     "@spothero/icons": "8.0.0",
     "@spothero/npm-publisher": "7.0.0",
     "@spothero/prettier-config": "4.0.0",
@@ -134,7 +134,7 @@
     "lint": "eslint .storybook src --ext .jsx,.js",
     "start": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
     "test": "pnpm run test:unit",
-    "test:template": "NODE_ENV=test jest --config ./jest.config.json",
+    "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",