@spothero/ui 15.1.0 → 15.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.1.0",
+  "version": "15.1.1",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -66,9 +66,8 @@
     "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",
-    "prepublishOnly": "npm run build",
     "release": "npm-release",
-    "release:storybook": "npm run build:storybook && push-dir --dir=docs --branch=gh-pages --allow-unclean"
+    "publish-storybook": "npm run build:storybook && push-dir --dir=docs --branch=gh-pages --allow-unclean"
   },
   "engines": {
     "node": ">=16.14.2",

package/styles/Alert/Alert.jsx

@@ -1,45 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-const Alert = ({className, children, type, size, inline}) => {
-    const classes = classNames(
-        'Alert',
-        {[`Alert-${type}`]: type},
-        {[`Alert-${size}`]: size},
-        {'Alert-inline': inline},
-        className
-    );
-
-    return (
-        <div className={classes}>
-            <span className="Alert-content">{children}</span>
-        </div>
-    );
-};
-
-Alert.propTypes = {
-    /** Additional class(es) to add to the component. */
-    className: PropTypes.string,
-    /** The content to render inside of the alert. */
-    children: PropTypes.node.isRequired,
-    /** Whether to show the alert inline instead of block. */
-    inline: PropTypes.bool,
-    /** The type of alert to show. */
-    type: PropTypes.oneOf([
-        'danger',
-        'highlight',
-        'success',
-        'neutral',
-        'muted',
-    ]),
-    /** The size of the alert. */
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-};
-
-Alert.defaultProps = {
-    type: 'neutral',
-    size: 'md',
-};
-
-export default Alert;

package/styles/Alert/Alert.spec.js

@@ -1,85 +0,0 @@
-describe('<Alert />', () => {
-    context('Colors', () => {
-        context('Neutral', () => {
-            beforeEach(() => {
-                cy.visitStory('v1/Alert/Colors', 'Neutral');
-            });
-
-            it('Has neutral styles', () => {
-                cy.get('.Alert').should('have.class', 'Alert-neutral');
-            });
-
-            it('Renders the correct children', () => {
-                cy.get('.Alert').contains('This is an alert.');
-            });
-        });
-
-        context('Highlight', () => {
-            it('Has highlight styles', () => {
-                cy.visitStory('v1/Alert/Colors', 'Highlight')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-highlight');
-            });
-        });
-
-        context('Danger', () => {
-            it('Has danger styles', () => {
-                cy.visitStory('v1/Alert/Colors', 'Danger')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-danger');
-            });
-        });
-
-        context('Success', () => {
-            it('Has success styles', () => {
-                cy.visitStory('v1/Alert/Colors', 'Success')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-success');
-            });
-        });
-
-        context('Muted', () => {
-            it('Has muted styles', () => {
-                cy.visitStory('v1/Alert/Colors', 'Muted')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-muted');
-            });
-        });
-    });
-
-    context('Display', () => {
-        context('Inline', () => {
-            it('Has inline styles', () => {
-                cy.visitStory('v1/Alert/Display', 'Inline')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-inline');
-            });
-        });
-    });
-
-    context('Sizes', () => {
-        context('Small', () => {
-            it('Has small styles', () => {
-                cy.visitStory('v1/Alert/Sizes', 'Small')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-sm');
-            });
-        });
-
-        context('Medium', () => {
-            it('Has medium styles', () => {
-                cy.visitStory('v1/Alert/Sizes', 'Medium')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-md');
-            });
-        });
-
-        context('Large', () => {
-            it('Has large styles', () => {
-                cy.visitStory('v1/Alert/Sizes', 'Large')
-                    .get('.Alert')
-                    .should('have.class', 'Alert-lg');
-            });
-        });
-    });
-});

package/styles/AutoSuggestInput/AutoSuggestInput.jsx

@@ -1,429 +0,0 @@
-import isEqual from 'lodash/isEqual';
-import React, {Component} from 'react';
-import PropTypes from 'prop-types';
-import classnames from 'classnames';
-import uuidV4 from 'uuid/v4';
-import IconTimesCircle from '@spothero/icons/times-circle';
-import TextInput from '../TextInput/TextInput';
-import TextInputPropTypes from '../TextInput/TextInputPropTypes';
-import AutoSuggestList from './AutoSuggestList';
-import Button from 'v1/components/Button/Button';
-
-/**
- * Calculates the difference between current scroll position and position of element, if outside visible window
- *
- * @param {object} elementAttributes
- * @param {number} elementAttributes.parentScrollTop Value of parent element `scrollTop` attribute
- * @param {number} elementAttributes.parentHeight Value of parent element `clientHeight` attribute
- * @param {number} elementAttributes.elementOffsetTop Value of element `offsetTop` attribute
- * @param {number} elementAttributes.elementHeight Value of element `clientHeight` attribute
- *
- * @returns {number} Pixel value of how far to scroll to view element
- */
-const getScrollDifferential = ({
-    parentScrollTop,
-    parentHeight,
-    elementOffsetTop,
-    elementHeight,
-}) => {
-    if (elementOffsetTop < parentScrollTop) {
-        return elementOffsetTop - parentScrollTop;
-    }
-
-    const parentLowerBound = parentScrollTop + parentHeight;
-    const elementLowerBound = elementOffsetTop + elementHeight;
-
-    if (elementLowerBound > parentLowerBound) {
-        return elementLowerBound - parentLowerBound;
-    }
-
-    return 0;
-};
-
-export default class AutoSuggestInput extends Component {
-    static propTypes = {
-        ...TextInputPropTypes,
-        /** Whether or not to highlight the first suggestion in the list when suggestions are presented. */
-        autoActivateFirstSuggest: PropTypes.bool,
-        /** The available suggestions. */
-        suggestions: PropTypes.arrayOf(
-            PropTypes.shape({
-                label: PropTypes.oneOfType([
-                    PropTypes.string,
-                    PropTypes.element,
-                ]).isRequired,
-                id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-            })
-        ),
-        /** A custom element to display at the bottom of the suggestion list */
-        suggestionBoxFooter: PropTypes.element,
-        /** Optional function to execute when a suggestion is selected. */
-        onSuggestionSelect: PropTypes.func,
-        /** Optional function to execute when input field is cleared. */
-        onClear: PropTypes.func,
-    };
-    static defaultProps = {
-        iconPosition: 'left',
-        name: 'search',
-        placeholder: 'Search',
-        suggestions: [],
-    };
-
-    constructor(props) {
-        super(props);
-
-        const {defaultValue} = props;
-
-        this.state = {
-            suggestionsHidden: true,
-            ignoreBlur: false,
-            value: defaultValue || '',
-            activeSuggestion: null,
-            inputKey: uuidV4(),
-        };
-    }
-
-    componentDidMount() {
-        const {suggestions} = this.props;
-
-        this._input?.node?.addEventListener('invalid', this._onInvalid);
-
-        if (suggestions.length) {
-            this._showSuggests();
-        } else {
-            this._hideSuggests();
-        }
-    }
-
-    componentDidUpdate(prevProps, prevState) {
-        const {suggestions, autoActivateFirstSuggest} = this.props;
-        const {value} = this.state;
-        const {suggestions: prevSuggestions} = prevProps;
-
-        if (prevState.value !== value) {
-            if (!value) {
-                this._input?.node?.focus();
-            }
-        }
-
-        if (!isEqual(prevSuggestions, suggestions)) {
-            if (suggestions && suggestions.length) {
-                this._showSuggests();
-
-                if (autoActivateFirstSuggest) {
-                    this._activateSuggest({direction: 'next'});
-                }
-            } else {
-                this._hideSuggests();
-            }
-        }
-    }
-
-    componentWillUnmount() {
-        this._input?.node?.removeEventListener('invalid', this._onInvalid);
-    }
-
-    _onInvalid = evt => {
-        evt.preventDefault();
-
-        const {onInvalid} = this.props;
-
-        if (onInvalid) {
-            onInvalid(evt.currentTarget.validity);
-        }
-    };
-
-    _onInputChange = evt => {
-        this.setState({
-            value: evt.target.value,
-        });
-
-        const {onChange} = this.props;
-
-        if (onChange) {
-            onChange(evt);
-        }
-    };
-
-    _onInputKeyDown = evt => {
-        switch (evt.which) {
-            case 40:
-                this._nextSuggest(evt);
-                break;
-
-            case 38:
-                this._previousSuggest(evt);
-                break;
-
-            case 13:
-                this._selectSuggest(evt);
-                break;
-
-            case 27:
-                this._hideSuggests(evt);
-                break;
-        }
-    };
-
-    _onInputFocus = () => {
-        const {onFocus} = this.props;
-
-        if (onFocus) {
-            onFocus();
-        }
-
-        this.setState({
-            suggestionsHidden: false,
-        });
-    };
-
-    _onInputBlur = () => {
-        if (!this.state.ignoreBlur) {
-            this._hideSuggests();
-        }
-    };
-
-    _onSuggestionMouseDown = () => {
-        this.setState({
-            ignoreBlur: true,
-        });
-    };
-
-    _onSuggestionMouseOut = () => {
-        this.setState({
-            ignoreBlur: false,
-        });
-    };
-
-    _onSelectSuggestion = ({suggestion = false}) => {
-        const {onSuggestionSelect} = this.props;
-        let selectedSuggestion = suggestion;
-
-        if (!selectedSuggestion) {
-            selectedSuggestion = {};
-            selectedSuggestion.label = this.state.value;
-        }
-
-        this.setState({
-            suggestionsHidden: true,
-            value: selectedSuggestion.label,
-            inputKey: uuidV4(),
-        });
-
-        onSuggestionSelect?.(selectedSuggestion);
-    };
-
-    _onClear = () => {
-        const {onClear} = this.props;
-
-        this.setState({
-            value: '',
-            inputKey: uuidV4(),
-        });
-
-        if (onClear) {
-            onClear();
-        }
-    };
-
-    _nextSuggest() {
-        this._activateSuggest({
-            direction: 'next',
-            isArrowPress: true,
-        });
-    }
-
-    _previousSuggest() {
-        this._activateSuggest({
-            direction: 'prev',
-            isArrowPress: true,
-        });
-    }
-
-    _selectSuggest = evt => {
-        evt.preventDefault();
-
-        this._onSelectSuggestion({
-            suggestion: this.state.activeSuggestion,
-        });
-    };
-
-    _showSuggests() {
-        if (this.state.suggestionsHidden) {
-            this.setState({
-                suggestionsHidden: false,
-            });
-        }
-    }
-
-    _hideSuggests() {
-        const {onBlur} = this.props;
-
-        if (onBlur) {
-            onBlur();
-        }
-
-        if (!this.state.suggestionsHidden) {
-            this.setState({
-                suggestionsHidden: true,
-            });
-        }
-    }
-
-    _activateSuggest({direction, isArrowPress = false}) {
-        const {suggestions} = this.props;
-        const {activeSuggestion} = this.state;
-        const suggestionsCount = suggestions.length - 1;
-        const next = direction === 'next';
-        const newState = {};
-        let newActiveSuggestion = null;
-        let newIndex = 0;
-        let i = 0;
-
-        for (i; i <= suggestionsCount; i++) {
-            if (suggestions[i] === activeSuggestion) {
-                newIndex = next ? i + 1 : i - 1;
-            }
-        }
-
-        if (!activeSuggestion) {
-            newIndex = next ? 0 : suggestionsCount;
-        }
-
-        if (newIndex < 0) {
-            newIndex = suggestionsCount;
-        } else if (newIndex > suggestionsCount) {
-            newIndex = 0;
-        }
-
-        if (newIndex >= 0 && newIndex <= suggestionsCount) {
-            newActiveSuggestion = suggestions[newIndex];
-        }
-
-        newState.activeSuggestion = newActiveSuggestion;
-
-        if (isArrowPress) {
-            newState.value = newActiveSuggestion
-                ? newActiveSuggestion.label
-                : '';
-        }
-
-        if (this._list) {
-            const activeChild = this._list.querySelector(
-                '.AutoSuggestInput-item-active'
-            );
-
-            let nextActiveChild = next
-                ? activeChild?.nextSibling
-                : activeChild?.previousSibling;
-
-            nextActiveChild = nextActiveChild
-                ? nextActiveChild
-                : next
-                ? this._list.firstElementChild
-                : this._list.lastElementChild;
-
-            if (nextActiveChild) {
-                const scrollDiff = getScrollDifferential({
-                    parentScrollTop: this._list.scrollTop,
-                    parentHeight: this._list.clientHeight,
-                    elementOffsetTop: nextActiveChild.offsetTop,
-                    elementHeight: nextActiveChild.clientHeight,
-                });
-
-                if (scrollDiff) {
-                    this._list.scrollTo(
-                        nextActiveChild.offsetLeft,
-                        this._list.scrollTop + scrollDiff
-                    );
-                }
-            }
-        }
-
-        this.setState(newState);
-    }
-
-    /**
-     * Getter for the input DOM element.
-     *
-     * @public
-     * @returns {Element} - The input element.
-     */
-    get node() {
-        return this._input?.node;
-    }
-
-    render() {
-        const {
-            className,
-            suggestions,
-            suggestionBoxFooter,
-            additionalInputProps,
-            ...textInputProps
-        } = this.props;
-        const {
-            value,
-            inputKey,
-            activeSuggestion,
-            suggestionsHidden,
-        } = this.state;
-        const classes = classnames(
-            'AutoSuggestInput',
-            {'AutoSuggestInput-suggestions-active': !suggestionsHidden},
-            {
-                'AutoSuggestInput-no-suggestions':
-                    !suggestions || !suggestions.length,
-            },
-            className
-        );
-        const newAdditionalInputProps = {
-            ...additionalInputProps,
-            onKeyDown: this._onInputKeyDown,
-            autoComplete: 'off',
-        };
-
-        return (
-            <div
-                ref={node => {
-                    this._container = node;
-                }}
-                className={classes}
-            >
-                <div className="FormElement-control">
-                    <TextInput
-                        key={inputKey}
-                        ref={node => {
-                            this._input = node;
-                        }}
-                        {...textInputProps}
-                        additionalInputProps={newAdditionalInputProps}
-                        defaultValue={value}
-                        onChange={this._onInputChange}
-                        onFocus={this._onInputFocus}
-                        onBlur={this._onInputBlur}
-                    />
-                    <AutoSuggestList
-                        ref={node => {
-                            this._list = node;
-                        }}
-                        hidden={suggestionsHidden}
-                        suggestions={suggestions || []}
-                        activeSuggestion={activeSuggestion}
-                        suggestionBoxFooter={suggestionBoxFooter}
-                        onSuggestionSelect={this._onSelectSuggestion}
-                        onSuggestionMouseDown={this._onSuggestionMouseDown}
-                        onSuggestionMouseOut={this._onSuggestionMouseOut}
-                    />
-                    {value && (
-                        <Button
-                            className="AutoSuggestInput-clear"
-                            onClick={this._onClear}
-                        >
-                            <IconTimesCircle />
-                        </Button>
-                    )}
-                </div>
-            </div>
-        );
-    }
-}