@spothero/ui 21.4.0 → 21.5.0

package/dist/components/CreatableSelect/CreatableSelect.js

@@ -0,0 +1,125 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CreatableSelectNode = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireWildcard(require("react"));
+var _creatable = _interopRequireDefault(require("react-select/creatable"));
+var _reactSelect = require("react-select");
+var _chevronDown = _interopRequireDefault(require("@spothero/icons/chevron-down"));
+var _react2 = require("@chakra-ui/react");
+var _FormControl = _interopRequireDefault(require("../FormControl/FormControl"));
+var _Icon = _interopRequireDefault(require("../Icon/Icon"));
+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 DropdownIndicator = props => {
+  const {
+    sizes
+  } = (0, _react2.useTheme)();
+  return /*#__PURE__*/_react.default.createElement(_reactSelect.components.DropdownIndicator, props, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    className: "CreatableSelect-dropdown-icon",
+    as: _chevronDown.default,
+    boxSize: sizes['2.5']
+  }));
+};
+
+// Exporting without forwardRef for storybook to work
+const CreatableSelectNode = _ref => {
+  let {
+    id,
+    label,
+    isInvalid = false,
+    isLoading = false,
+    isRequired,
+    options = [],
+    placeholder = '',
+    errorMessage,
+    helperText,
+    innerRef,
+    ...props
+  } = _ref;
+  const {
+    colors,
+    fontSizes
+  } = (0, _react2.useTheme)();
+  if (innerRef) {
+    props.ref = innerRef;
+  }
+  const customStyles = {
+    control: (provided, state) => ({
+      ...provided,
+      borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200'],
+      borderWidth: '1px',
+      boxShadow: 'none',
+      '&:hover': {
+        borderColor: isInvalid ? colors.error : state.isFocused ? colors.primary.default : colors.gray['200']
+      }
+    }),
+    placeholder: provided => ({
+      ...provided,
+      fontSize: fontSizes.sm,
+      color: colors.gray['200']
+    }),
+    dropdownIndicator: provided => ({
+      ...provided,
+      color: colors.brandBlue,
+      '&:hover': {
+        color: colors.brandBlue
+      }
+    }),
+    indicatorSeparator: provided => ({
+      ...provided,
+      display: 'none'
+    })
+  };
+  return /*#__PURE__*/_react.default.createElement(_FormControl.default, {
+    errorMessage: errorMessage,
+    isRequired: isRequired,
+    isInvalid: isInvalid,
+    helperText: helperText,
+    label: label,
+    inputId: id
+  }, /*#__PURE__*/_react.default.createElement(_creatable.default, (0, _extends2.default)({
+    id: id,
+    components: {
+      DropdownIndicator
+    },
+    styles: customStyles,
+    options: options,
+    placeholder: placeholder,
+    isLoading: isLoading
+  }, props)));
+};
+exports.CreatableSelectNode = CreatableSelectNode;
+const CreatableSelect = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => {
+  const {
+    id,
+    label,
+    isInvalid = false,
+    isLoading = false,
+    isRequired,
+    options = [],
+    placeholder = '',
+    errorMessage,
+    helperText,
+    ...additionalProps
+  } = props;
+  return /*#__PURE__*/_react.default.createElement(CreatableSelectNode, (0, _extends2.default)({
+    id: id,
+    innerRef: ref,
+    label: label,
+    options: options,
+    placeholder: placeholder,
+    helperText: helperText,
+    errorMessage: errorMessage,
+    isLoading: isLoading,
+    isInvalid: isInvalid,
+    isRequired: isRequired
+  }, additionalProps));
+});
+var _default = exports.default = /*#__PURE__*/(0, _react.forwardRef)((props, ref) => /*#__PURE__*/_react.default.createElement(CreatableSelectNode, (0, _extends2.default)({
+  ref: ref
+}, props)));

package/dist/components/CreatableSelect/CreatableSelect.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CreatableSelect = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime-corejs3/helpers/extends"));
+var _react = _interopRequireDefault(require("react"));
+var _createControl = require("storybook/utils/create-control");
+var _CreatableSelect = require("./CreatableSelect");
+var _default = exports.default = {
+  title: 'v2/CreatableSelect',
+  component: _CreatableSelect.CreatableSelectNode,
+  parameters: {
+    removeBaseHtmlClass: true
+  },
+  argTypes: {
+    ...(0, _createControl.createSelectControl)('createOptionPosition', ['first', 'last'])
+  },
+  args: {
+    label: 'Say Something',
+    isClearable: true,
+    placeholder: 'Please Say Anything or Select Something to Say...',
+    createOptionPosition: 'first',
+    isLoading: false,
+    isInvalid: false,
+    isRequired: false,
+    helperText: '',
+    errorMessage: 'Oh no'
+  }
+};
+const CreatableSelectTemplate = props => /*#__PURE__*/_react.default.createElement(_CreatableSelect.CreatableSelectNode, (0, _extends2.default)({
+  id: "say-something-select",
+  allowCreateWhileLoading: true,
+  createOptionPosition: "first",
+  options: [{
+    value: "",
+    label: "Say Nothing"
+  }, {
+    value: "hello",
+    label: "Hello"
+  }, {
+    value: "goodbye",
+    label: "Goodbye"
+  }, {
+    value: "cool",
+    label: "Cool"
+  }, {
+    value: "raisins",
+    label: "What is your opinion on raisins?"
+  }],
+  formatCreateLabel: other => `Say "${other}"`
+}, props));
+const CreatableSelect = exports.CreatableSelect = CreatableSelectTemplate.bind({});

package/dist/components/CreatableSelect/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, "CreatableSelect", {
+  enumerable: true,
+  get: function () {
+    return _CreatableSelect.default;
+  }
+});
+var _CreatableSelect = _interopRequireDefault(require("./CreatableSelect"));

package/dist/components/Table/index.js

@@ -16,6 +16,12 @@ Object.defineProperty(exports, "TableCaption", {
     return _react.TableCaption;
   }
 });
+Object.defineProperty(exports, "TableContainer", {
+  enumerable: true,
+  get: function () {
+    return _react.TableContainer;
+  }
+});
 Object.defineProperty(exports, "Tbody", {
   enumerable: true,
   get: function () {

package/dist/components/index.js

@@ -41,6 +41,7 @@ var _exportNames = {
   AutoSuggestSelect: true,
   Badge: true,
   ToggleButtonGroup: true,
+  CreatableSelect: true,
   Box: true,
   Kbd: true,
   Code: true,
@@ -81,7 +82,8 @@ var _exportNames = {
   useControllableState: true,
   usePrefersReducedMotion: true,
   keyframes: true,
-  BoxProps: true
+  BoxProps: true,
+  Textarea: true
 };
 Object.defineProperty(exports, "Alert", {
   enumerable: true,
@@ -185,6 +187,12 @@ Object.defineProperty(exports, "Container", {
     return _Container.default;
   }
 });
+Object.defineProperty(exports, "CreatableSelect", {
+  enumerable: true,
+  get: function () {
+    return _CreatableSelect.CreatableSelect;
+  }
+});
 Object.defineProperty(exports, "Divider", {
   enumerable: true,
   get: function () {
@@ -455,6 +463,12 @@ Object.defineProperty(exports, "Text", {
     return _Text.default;
   }
 });
+Object.defineProperty(exports, "Textarea", {
+  enumerable: true,
+  get: function () {
+    return _react.Textarea;
+  }
+});
 Object.defineProperty(exports, "ThemeProvider", {
   enumerable: true,
   get: function () {
@@ -643,6 +657,7 @@ var _Radio = require("./Radio");
 var _AutoSuggestSelect = require("./AutoSuggestSelect");
 var _Badge = _interopRequireDefault(require("./Badge/Badge"));
 var _ToggleButtonGroup = _interopRequireDefault(require("./ToggleButtonGroup/ToggleButtonGroup"));
+var _CreatableSelect = require("./CreatableSelect");
 var _react = require("@chakra-ui/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; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "21.4.0",
+  "version": "21.5.0",
   "description": "SpotHero's React component UI library.",
   "main": "./dist/components/index.js",
   "exports": "./dist/components/index.js",
@@ -95,13 +95,13 @@
     "css-loader": "5.1.3",
     "sass-loader": "10.2.1",
     "@spothero/babel-preset-spothero": "5.1.0",
-    "@spothero/browserslist-config": "4.0.0",
     "@spothero/core": "7.0.0",
-    "@spothero/eslint-config": "6.1.0",
     "@spothero/icons": "8.1.0",
+    "@spothero/eslint-config": "6.1.0",
     "@spothero/npm-publisher": "7.0.0",
-    "@spothero/prettier-config": "4.0.0",
-    "@spothero/stylelint-config": "6.0.0"
+    "@spothero/stylelint-config": "6.0.0",
+    "@spothero/browserslist-config": "4.0.0",
+    "@spothero/prettier-config": "4.0.0"
   },
   "dependencies": {
     "@chakra-ui/react": "1.8.8",