@spothero/ui 14.8.0 → 14.8.2-beta.0

package/CHANGELOG.md

@@ -1,3 +1,12 @@
+# 14.8.2-beta.0 - 05/23/2022
+
+## Miscellaneous Updates
+* [[910c646](https://github.com/spothero/fe-ui/commit/910c646)] - `fix:` Update components with optional chaining and required props (JanaviAnand_SpotHero)
+
+# 14.8.1 - 05/20/2022
+## Miscellaneous Updates
+* [[63d43ff](https://github.com/spothero/fe-ui/commit/63d43ff)] - Sear 2077 - replace rollup with dex ([#297](https://github.com/spothero/fe-ui/pull/297)) (Tyler Williams)
+
 # 14.8.0 - 05/19/2022
 
 ## New Features

package/CHANGELOG.tmp

@@ -1,5 +1,5 @@
-# 14.8.0 - 05/19/2022
+# 14.8.2-beta.0 - 05/23/2022
 
-## New Features
-* [[c5dcc22](https://github.com/spothero/fe-ui/commit/c5dcc22)] - Removed textButton and textButtonOnDark from fe-ui.  Also removed underline for now ([#296](https://github.com/spothero/fe-ui/pull/296)) (Max Rashes)
+## Miscellaneous Updates
+* [[910c646](https://github.com/spothero/fe-ui/commit/910c646)] - `fix:` Update components with optional chaining and required props (JanaviAnand_SpotHero)
 

package/backlog/AutoSuggestInput/AutoSuggestInput.js

@@ -241,9 +241,10 @@ var AutoSuggestInput = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(AutoSuggestInput, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var suggestions = this.props.suggestions;
+      var _this$_input, _this$_input$node;
 
-      this._input.node.addEventListener('invalid', this._onInvalid);
+      var suggestions = this.props.suggestions;
+      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : (_this$_input$node = _this$_input.node) === null || _this$_input$node === void 0 ? void 0 : _this$_input$node.addEventListener('invalid', this._onInvalid);
 
       if (suggestions.length) {
         this._showSuggests();
@@ -262,7 +263,9 @@ var AutoSuggestInput = /*#__PURE__*/function (_Component) {
 
       if (prevState.value !== value) {
         if (!value) {
-          this._input.node.focus();
+          var _this$_input2, _this$_input2$node;
+
+          (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : (_this$_input2$node = _this$_input2.node) === null || _this$_input2$node === void 0 ? void 0 : _this$_input2$node.focus();
         }
       }
 
@@ -283,7 +286,9 @@ var AutoSuggestInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this._input.node.removeEventListener('invalid', this._onInvalid);
+      var _this$_input3, _this$_input3$node;
+
+      (_this$_input3 = this._input) === null || _this$_input3 === void 0 ? void 0 : (_this$_input3$node = _this$_input3.node) === null || _this$_input3$node === void 0 ? void 0 : _this$_input3$node.removeEventListener('invalid', this._onInvalid);
     }
   }, {
     key: "_nextSuggest",
@@ -398,7 +403,9 @@ var AutoSuggestInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "node",
     get: function get() {
-      return this._input.node;
+      var _this$_input4;
+
+      return (_this$_input4 = this._input) === null || _this$_input4 === void 0 ? void 0 : _this$_input4.node;
     }
   }, {
     key: "render",

package/backlog/TextInput/TextInput.js

@@ -104,7 +104,9 @@ var TextInput = /*#__PURE__*/function (_Component) {
   (0, _createClass2.default)(TextInput, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      this._input.getInputDOMNode().addEventListener('invalid', this._onInvalid);
+      var _this$_input, _this$_input$getInput;
+
+      (_this$_input = this._input) === null || _this$_input === void 0 ? void 0 : (_this$_input$getInput = _this$_input.getInputDOMNode()) === null || _this$_input$getInput === void 0 ? void 0 : _this$_input$getInput.addEventListener('invalid', this._onInvalid);
     }
   }, {
     key: "componentDidUpdate",
@@ -116,13 +118,17 @@ var TextInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
-      this._input.getInputDOMNode().removeEventListener('invalid', this._onInvalid);
+      var _this$_input2, _this$_input2$getInpu;
+
+      (_this$_input2 = this._input) === null || _this$_input2 === void 0 ? void 0 : (_this$_input2$getInpu = _this$_input2.getInputDOMNode()) === null || _this$_input2$getInpu === void 0 ? void 0 : _this$_input2$getInpu.removeEventListener('invalid', this._onInvalid);
     }
   }, {
     key: "_checkFocus",
     value: function _checkFocus() {
       if (this.props.focus) {
-        this._input.getInputDOMNode().focus();
+        var _this$_input3, _this$_input3$getInpu;
+
+        (_this$_input3 = this._input) === null || _this$_input3 === void 0 ? void 0 : (_this$_input3$getInpu = _this$_input3.getInputDOMNode()) === null || _this$_input3$getInpu === void 0 ? void 0 : _this$_input3$getInpu.focus();
       }
     }
     /**
@@ -135,7 +141,9 @@ var TextInput = /*#__PURE__*/function (_Component) {
   }, {
     key: "node",
     get: function get() {
-      return this._input.getInputDOMNode();
+      var _this$_input4;
+
+      return (_this$_input4 = this._input) === null || _this$_input4 === void 0 ? void 0 : _this$_input4.getInputDOMNode();
     }
   }, {
     key: "render",

package/dex.config.js

@@ -0,0 +1,48 @@
+const path = require('path');
+
+const targetEntry = process.env.TARGET_ENTRY;
+
+module.exports = {
+    client: {
+        plugins: [],
+    },
+    production: {
+        client: {
+            entry: [`./src/${targetEntry}/components/index.js`],
+            output: {
+                filename: 'index.js',
+                path: path.resolve(__dirname, targetEntry),
+                library: {
+                    name: '@spothero/ui',
+                    type: 'umd',
+                },
+                globalObject: 'this'
+            },
+            externals: {
+                react: {
+                    root: 'React',
+                    commonjs2: 'react',
+                    commonjs: 'react',
+                    amd: 'react'
+                },
+                'react-dom': {
+                    root: 'ReactDOM',
+                    commonjs2: 'react-dom',
+                    commonjs: 'react-dom',
+                    amd: 'react-dom'
+                },
+                'lodash': {
+                    commonjs2: 'lodash',
+                    commonjs: 'lodash',
+                    amd: 'lodash',
+                    root: '_'
+                },
+                'prop-types': 'prop-types',
+                '@chakra-ui/react': '@chakra-ui/react'
+
+            }
+        },
+
+    },
+
+};

package/package.json

@@ -1,8 +1,8 @@
 {
   "name": "@spothero/ui",
-  "version": "14.8.0",
+  "version": "14.8.2-beta.0",
   "description": "SpotHero's React component UI library.",
-  "main": "v2/index-bundled.cjs.js",
+  "main": "v2/index.js",
   "module": "v2/index.js",
   "repository": "https://github.com/spothero/fe-ui",
   "author": "SpotHero",
@@ -64,8 +64,8 @@
     "test:unit": "npm run test:template -- --coverage",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 npm run test:template -- --watch",
     "clone:styles": "rsync -a src/ styles && rm -rf styles/**/*.{js,jsx} styles/**/stories",
-    "build:v1": "rollup --config rollup/v1.config.js",
-    "build:v2": "rollup --config rollup/v2.config.js",
+    "build:v1": "TARGET_ENTRY=v1 NODE_ENV=production dex",
+    "build:v2": "TARGET_ENTRY=v2 NODE_ENV=production dex",
     "build:backlog": "NODE_ENV=production babel src -d backlog --ignore \"**/*.spec.js\",\"**/stories/**\",\"**/v2/**\"",
     "build": "npm run clean && npm run clone:styles && npm run build:backlog && npm run build:v1 && npm run build:v2",
     "build:storybook": "build-storybook -o ./docs",
@@ -88,8 +88,6 @@
     "@babel/runtime-corejs3": "7.14.7",
     "@cypress/browserify-preprocessor": "3.0.1",
     "@jackfranklin/test-data-bot": "1.3.0",
-    "@rollup/plugin-alias": "3.1.2",
-    "@rollup/plugin-node-resolve": "11.2.0",
     "@spothero/babel-preset-spothero": "0.2.0",
     "@spothero/browserslist-config": "1.0.0",
     "@spothero/commitlint-config": "3.1.1",
@@ -132,13 +130,6 @@
     "react-redux": "7.2.8",
     "redux": "4.1.2",
     "regenerator-runtime": "0.13.7",
-    "rollup": "2.40.0",
-    "rollup-plugin-babel": "4.4.0",
-    "rollup-plugin-commonjs": "10.1.0",
-    "rollup-plugin-peer-deps-external": "2.2.4",
-    "rollup-plugin-replace": "2.2.0",
-    "rollup-plugin-terser": "7.0.2",
-    "rollup-plugin-visualizer": "4.2.0",
     "start-server-and-test": "1.12.6",
     "style-loader": "1.2.1",
     "webpack-merge": "5.1.4"

package/styles/Alert/_Alert.scss

@@ -1,3 +1,5 @@
+@use "sass:color";
+
 .Alert {
     margin: 6px 0 10px;
     display: block;
@@ -13,7 +15,7 @@
     display: inline-block;
 
     .Alert-danger & {
-        background: lighten($color-stop, 35%);
+        background: color.adjust($color-stop, $lightness: 35%);
         color: $color-stop;
     }
 

package/styles/AutoSuggestInput/AutoSuggestInput.jsx

@@ -86,7 +86,7 @@ export default class AutoSuggestInput extends Component {
     componentDidMount() {
         const {suggestions} = this.props;
 
-        this._input.node.addEventListener('invalid', this._onInvalid);
+        this._input?.node?.addEventListener('invalid', this._onInvalid);
 
         if (suggestions.length) {
             this._showSuggests();
@@ -102,7 +102,7 @@ export default class AutoSuggestInput extends Component {
 
         if (prevState.value !== value) {
             if (!value) {
-                this._input.node.focus();
+                this._input?.node?.focus();
             }
         }
 
@@ -120,7 +120,7 @@ export default class AutoSuggestInput extends Component {
     }
 
     componentWillUnmount() {
-        this._input.node.removeEventListener('invalid', this._onInvalid);
+        this._input?.node?.removeEventListener('invalid', this._onInvalid);
     }
 
     _onInvalid = evt => {
@@ -350,7 +350,7 @@ export default class AutoSuggestInput extends Component {
      * @returns {Element} - The input element.
      */
     get node() {
-        return this._input.node;
+        return this._input?.node;
     }
 
     render() {

package/styles/AutoSuggestInput/AutoSuggestList.jsx

@@ -20,7 +20,7 @@ class AutoSuggestList extends PureComponent {
         /** The suggestion object which is currently active. */
         activeSuggestion: PropTypes.object,
         /** A custom element to display at the bottom of the suggestion list */
-        suggestionBoxFooter: PropTypes.element,
+        suggestionBoxFooter: PropTypes.element.isRequired,
         /** Function to execute when a suggestion is selected. */
         onSuggestionSelect: PropTypes.func.isRequired,
         /** Optional function to execute for suggestion list item's mousedown event. */

package/styles/AutoSuggestInput/_AutoSuggestInput.scss

@@ -61,7 +61,7 @@
 }
 
 .AutoSuggestInput-item {
-    @include ellipsis();
+    @include ellipsis;
     font-size: 14px;
     cursor: pointer;
     padding: 7px 10px 7px 16px;
@@ -107,6 +107,7 @@
     .Icon {
         width: 18px;
         height: 18px;
+
         // Updated to account for small positioning changes
         // due to the Chakra implementation. Allowed the icon
         // to inherit 'display: inline-block;', and the margin

package/styles/Chart/_Chart.scss

@@ -1,3 +1,4 @@
+@use "sass:list";
 @import "chartist";
 
 .ct-area,
@@ -14,7 +15,7 @@
 .ct-series {
     @for $i from 0 to length($ct-series-colors) {
         .ct-circle-#{$i} {
-            stroke: nth($ct-series-colors, $i + 1);
+            stroke: list.nth($ct-series-colors, $i + 1);
         }
     }
 }
@@ -61,10 +62,12 @@
     }
 
     @for $i from 0 to length($ct-series-colors) {
+        /* stylelint-disable */
         .ct-series-#{$i}::before {
-            background-color: nth($ct-series-colors, $i + 1);
-            border-color: nth($ct-series-colors, $i + 1);
+            background-color: list.nth($ct-series-colors, $i + 1);
+            border-color: list.nth($ct-series-colors, $i + 1);
         }
+        /* stylelint-enable */
     }
 }
 

package/styles/Checkbox/_Checkbox.scss

@@ -51,6 +51,7 @@
 
     .Icon {
         position: absolute;
+
         // Chakra's implementation created some small issues
         // with how elements were positioned, this updates the
         // element to parody the original design
@@ -72,6 +73,7 @@
 
         &::before {
             @extend %checkbox-common;
+
             // Chakra's implementation created some small issues
             // with how elements were positioned, this updates the
             // element to parody the original design

package/styles/DateTime/_DatePickerCalendar.scss

@@ -79,16 +79,20 @@
     outline: none;
     border-radius: 19px;
 
+    /* stylelint-disable */
     &:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected) {
         &:hover {
             border: 1px solid $color-go;
             border-radius: 100%;
         }
     }
+    /* stylelint-enable */
 }
 
-.DayPicker--interactionDisabled .DayPicker-Day {
-    cursor: default;
+.DayPicker--interactionDisabled {
+    .DayPicker-Day {
+        cursor: default;
+    }
 }
 
 .DayPicker-Day--today {
@@ -99,11 +103,12 @@
     color: $color-cement;
     cursor: default;
 }
-
+/* stylelint-disable */
 .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
     color: $color-white;
     background-color: $color-go;
 }
+/* stylelint-enable */
 
 .DatePicker-calendar-with-range {
     .DayPicker-Day {
@@ -116,6 +121,7 @@
         }
     }
 
+    /* stylelint-disable */
     .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) {
         color: $color-white;
         background-color: rgba($color-go, 0.33);
@@ -124,6 +130,7 @@
             background-color: transparent;
         }
     }
+    /* stylelint-enable */
 
     .DayPicker-Day--start,
     .DayPicker-Day--end {

package/styles/DateTime/_DateTimePicker.scss

@@ -1,6 +1,8 @@
+@use "sass:color";
+
 @keyframes HIGHLIGHT {
     5% {
-        background-color: lighten($color-highlight, 40%);
+        background-color: color.adjust($color-highlight, $lightness: 40%);
     }
 }
 

package/styles/GooglePlacesSearchInput/GooglePlacesSearchInput.jsx

@@ -24,7 +24,7 @@ export default class GooglePlacesSearchInput extends Component {
         /** Used to limit the suggestion results by lat/long bounds. */
         bounds: PropTypes.object,
         /** The `google maps` object for using the autocomplete service. */
-        googleMaps: PropTypes.object,
+        googleMaps: PropTypes.object.isRequired,
         /** A custom element (typically a PoweredByGoogle component) to display at the bottom of the suggestion list. */
         poweredByGoogleFooter: PropTypes.element.isRequired,
         /** An object containing the bias options */

package/styles/PasswordControl/_PasswordControl.scss

@@ -35,6 +35,7 @@
 
     .Checkbox {
         display: none;
+
         // Chakra's implementation created some small issues
         // with how elements were positioned, this updates the
         // element to parody the original design
@@ -54,8 +55,10 @@
         color: $color-cement;
         text-transform: uppercase;
 
-        &:not([disabled]):hover {
-            color: $color-cement;
+        &:not([disabled]) {
+            &:hover {
+                color: $color-cement;
+            }
         }
     }
 

package/styles/Radio/_Radio.scss

@@ -60,6 +60,7 @@
 
         &::before {
             @extend %radio-common;
+
             // Chakra's implementation created some small issues
             // with how elements were positioned, this updates the
             // element to parody the original design

package/styles/Select/_Select.scss

@@ -11,7 +11,7 @@
     }
 
     .Select-icon {
-        @include center();
+        @include center;
         line-height: 1;
 
         .Icon {

package/styles/TextInput/TextInput.jsx

@@ -17,8 +17,8 @@ export default class TextInput extends Component {
 
     componentDidMount() {
         this._input
-            .getInputDOMNode()
-            .addEventListener('invalid', this._onInvalid);
+            ?.getInputDOMNode()
+            ?.addEventListener('invalid', this._onInvalid);
     }
 
     componentDidUpdate(prevProps, prevState) {
@@ -29,8 +29,8 @@ export default class TextInput extends Component {
 
     componentWillUnmount() {
         this._input
-            .getInputDOMNode()
-            .removeEventListener('invalid', this._onInvalid);
+            ?.getInputDOMNode()
+            ?.removeEventListener('invalid', this._onInvalid);
     }
 
     _onInvalid = evt => {
@@ -62,7 +62,7 @@ export default class TextInput extends Component {
 
     _checkFocus() {
         if (this.props.focus) {
-            this._input.getInputDOMNode().focus();
+            this._input?.getInputDOMNode()?.focus();
         }
     }
 
@@ -73,7 +73,7 @@ export default class TextInput extends Component {
      * @returns {Element} - The input element.
      */
     get node() {
-        return this._input.getInputDOMNode();
+        return this._input?.getInputDOMNode();
     }
 
     render() {

package/styles/TextInput/_TextInput.scss

@@ -2,7 +2,7 @@
     @extend %form-element;
 
     .Icon {
-        @include center();
+        @include center;
         width: 16px;
         fill: $color-cement;
     }

package/styles/common/sass/_forms.scss

@@ -22,7 +22,7 @@
 }
 
 %form-element-item {
-    @include font-family();
+    @include font-family;
     display: block;
     width: 100%;
     background-color: $color-white;

package/styles/v1/components/Button/_Button.scss

@@ -8,10 +8,9 @@
     }
 }
 
-a.Button,
 .Button {
     @extend %control-size;
-    @include font-family();
+    @include font-family;
     padding: 10px 30px;
     text-align: center;
     font-weight: $font-weight-semi-bold;
@@ -57,27 +56,23 @@ a.Button,
     }
 }
 
-a.Button-block,
 .Button-block {
     display: block;
     width: 100%;
 }
 
-a.Button-with-icon-left,
 .Button-with-icon-left {
     .Icon {
         margin-right: 5px;
     }
 }
 
-a.Button-with-icon-right,
 .Button-with-icon-right {
     .Icon {
         margin-left: 5px;
     }
 }
 
-a.Button-primary,
 .Button-primary {
     background-color: $color-shift;
     color: $color-white;
@@ -98,7 +93,6 @@ a.Button-primary,
     }
 }
 
-a.Button-secondary,
 .Button-secondary {
     background-color: $color-white;
     color: $color-shift;
@@ -117,7 +111,6 @@ a.Button-secondary,
     }
 }
 
-a.Button-tertiary,
 .Button-tertiary {
     background-color: $color-white;
     color: $color-cement;
@@ -136,7 +129,6 @@ a.Button-tertiary,
     }
 }
 
-a.Button-loading,
 .Button-loading {
     position: relative;
     pointer-events: none;

package/styles/v1/components/Image/_Image.scss

@@ -14,7 +14,7 @@
     }
 
     .PulseLoader-pulse {
-        @include center();
+        @include center;
     }
 }
 

package/styles/v1/components/TextButton/_TextButton.scss

@@ -9,7 +9,7 @@
 }
 
 .TextButton {
-    @include font-family();
+    @include font-family;
     display: inline-block;
     cursor: pointer;
     white-space: nowrap;

package/styles/v1/components/index.js

@@ -1,6 +1,6 @@
-export { default as Panel } from './Panel/Panel';
-export { default as Button } from './Button/Button';
-export { default as Table } from './Table/Table';
-export { default as TextButton } from './TextButton/TextButton';
-export { default as Image } from './Image/Image';
-export { default as Loader } from './Loader/Loader';
+export {default as Panel} from './Panel/Panel';
+export {default as Button} from './Button/Button';
+export {default as Table} from './Table/Table';
+export {default as TextButton} from './TextButton/TextButton';
+export {default as Image} from './Image/Image';
+export {default as Loader} from './Loader/Loader';

package/styles/v2/components/Select/Select.jsx

@@ -1,8 +1,10 @@
-import React, {forwardRef} from 'react';
 import cn from 'classnames';
 import PropTypes from 'prop-types';
+import React, {forwardRef} from 'react';
 import {Select as ChakraSelect} from '@chakra-ui/react';
+import IconChevronDown from '@spothero/icons/chevron-down';
 
+import Icon from '../Icon/Icon';
 import FormControl from '../FormControl/FormControl';
 
 const Select = forwardRef(
@@ -31,6 +33,8 @@ const Select = forwardRef(
                 inputId={props.id}
             >
                 <ChakraSelect
+                    icon={<Icon as={IconChevronDown} />}
+                    iconSize={12}
                     fontWeight="regular"
                     fontSize="sm"
                     ref={ref}

package/v1/assets-manifest.json

@@ -0,0 +1,5 @@
+{
+  "index.html": "index.html",
+  "index.js.license.txt": "index.js.LICENSE.txt",
+  "main.js": "index.js"
+}

package/v1/index.html

@@ -0,0 +1 @@
+<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/index.js"></script></head><body><div id="root"></div></body></html>