@spothero/ui 16.0.0-beta.0 → 16.0.0-beta.1

package/styles/components/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -1,194 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import FormControl from '../FormControl/FormControl';
-import AsyncSelect from 'react-select/async';
-import {useTheme} from '@chakra-ui/react';
-import IconTimesCircle from '@spothero/icons/times-circle';
-
-const AutoSuggestSelect = forwardRef(
-    (
-        {
-            id,
-            label,
-            helperText,
-            errorMessage,
-            isInvalid,
-            isDisabled,
-            isRequired,
-            getOptions,
-            onChange,
-            iconSrc,
-            placeholder,
-        },
-        ref
-    ) => {
-        const {colors, fontSizes, sizes} = useTheme();
-
-        const handleChange = selectedOption => {
-            onChange(selectedOption);
-        };
-
-        const icon = (color = 'transparent') => ({
-            alignItems: 'center',
-            display: 'flex',
-
-            ':before': {
-                backgroundColor: color,
-                content: '" "',
-                display: 'block',
-                marginRight: sizes['3'],
-                height: sizes['4'],
-                width: sizes['5'],
-                mask: `url(${iconSrc}) no-repeat 50% 50%`,
-                maskSize: 'contain',
-            },
-        });
-
-        const baseText = {
-            fontSize: fontSizes.base,
-            color: colors.black,
-        };
-
-        /** React Select doesn't use Chakra but it does use Emotion so it's not too difficult to use values from our Chakra theme. Here is the documentation for React Select styling: https://react-select.com/styles  */
-        const customStyles = {
-            menu: provided => ({
-                ...provided,
-                ...baseText,
-            }),
-            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'],
-                },
-            }),
-            input: (provided, state) => ({
-                ...provided,
-                ...baseText,
-                padding: sizes['2'],
-                backgroundColor: state.isDisabled
-                    ? colors.gray['200']
-                    : 'transparent',
-                ...(iconSrc && icon(colors.gray['600'])),
-            }),
-            placeholder: provided => ({
-                ...provided,
-                padding: sizes['2'],
-                fontSize: fontSizes.base,
-                color: colors.gray['600'],
-                ...(iconSrc && icon()),
-            }),
-            singleValue: provided => ({
-                ...provided,
-                ...baseText,
-                padding: sizes['2'],
-                ...(iconSrc && icon()),
-            }),
-            option: (provided, state) => ({
-                ...provided,
-                backgroundColor: state.isSelected
-                    ? colors.gray['200']
-                    : state.isFocused
-                    ? colors.gray['50']
-                    : 'transparent',
-                color: colors.black,
-            }),
-            clearIndicator: provided => ({
-                ...provided,
-                color: colors.gray['600'],
-            }),
-            dropdownIndicator: provided => ({
-                ...provided,
-                color: colors.gray['600'],
-            }),
-        };
-
-        const clearIndicatorStyles = {
-            width: sizes['5'],
-            display: 'flex',
-            marginRight: sizes['3'],
-            color: colors.gray['600'],
-            cursor: 'pointer',
-        };
-
-        /** React Select allows you to override the clear indicator with your own custom component: https://react-select.com/components */
-        const ClearIndicator = ({innerRef, innerProps}) => (
-            <div style={clearIndicatorStyles} ref={innerRef} {...innerProps}>
-                <IconTimesCircle />
-            </div>
-        );
-
-        return (
-            <FormControl
-                errorMessage={errorMessage}
-                isRequired={isRequired}
-                helperText={helperText}
-                label={label}
-                inputId={id}
-            >
-                <AsyncSelect
-                    closeMenuOnSelect
-                    isClearable
-                    cacheOptions
-                    components={{
-                        DropdownIndicator: () => null,
-                        IndicatorSeparator: () => null,
-                        ClearIndicator,
-                    }}
-                    openMenuOnClick={false}
-                    loadOptions={getOptions}
-                    onChange={handleChange}
-                    isDisabled={isDisabled}
-                    id={id}
-                    placeholder={placeholder}
-                    styles={customStyles}
-                    ref={ref}
-                />
-            </FormControl>
-        );
-    }
-);
-
-AutoSuggestSelect.propTypes = {
-    /** ID applied to the select and label */
-    id: PropTypes.string.isRequired,
-    /** Label that describes the select */
-    label: PropTypes.string,
-    /** Text to use as placeholder in the input */
-    placeholder: PropTypes.string,
-    /** Optional helper text displayed below the select */
-    helperText: PropTypes.string,
-    /** Error message that would display under the select */
-    errorMessage: PropTypes.string,
-    /** Boolean that sets whether the select is valid */
-    isInvalid: PropTypes.bool,
-    /** Boolean that sets whether the select is disabled */
-    isDisabled: PropTypes.bool,
-    /** Boolean that sets whether the select is required */
-    isRequired: PropTypes.bool,
-    /** Function that is called with the value typed into the input that returns a list of options for the select */
-    getOptions: PropTypes.func.isRequired,
-    /** Function that is called when an option is selected, it returns the label and value of the selection */
-    onChange: PropTypes.func.isRequired,
-    /** Optional src to SVG to use as search icon */
-    iconSrc: PropTypes.string,
-
-    // This prop is added to work around error: 'innerRef' is missing in props validation react/prop-types
-    // eslint-disable-next-line react/no-unused-prop-types
-    innerRef: PropTypes.object,
-    // This prop is added to work around error: 'innerProps' is missing in props validation react/prop-types
-    // eslint-disable-next-line react/no-unused-prop-types
-    innerProps: PropTypes.object,
-};
-
-export default AutoSuggestSelect;

package/styles/components/AutoSuggestSelect/index.js

@@ -1 +0,0 @@
-export {default as AutoSuggestSelect} from './AutoSuggestSelect';

package/styles/components/Badge/Badge.jsx

@@ -1 +0,0 @@
-export {Badge as default} from '@chakra-ui/react';

package/styles/components/Badge/Badge.stories.js

@@ -1,32 +0,0 @@
-import React from 'react';
-import Component from './Badge';
-
-export default {
-    title: 'v2/Badge',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const Template = props => (
-    <>
-        <Component variant='primary'>
-            Primary
-        </Component>
-        <br/>
-        <Component variant='warningLight'>
-            Warning Light
-        </Component>
-        <br/>
-        <Component variant='solid' colorScheme='green'>
-            Success
-        </Component>
-        <br/>
-        <Component variant='subtle' colorScheme='red'>
-            Removed
-        </Component>
-    </>
-);
-
-export const Badge = Template.bind({});

package/styles/components/Badge/styles/index.js

@@ -1,29 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    px: 1,
-    textTransform: 'reset',
-    fontSize: 'xs',
-    borderRadius: 'sm',
-    fontWeight: 'bold',
-};
-
-export const variants = {
-     primary: {
-         bg: 'primary.default',
-         color: 'white',
-     },
-    warningLight: {
-         bg: 'yellow.100',
-         color: 'black',
-    },
-};
-
-const defaultProps = {};
-
-export default merge(chakraDefaultTheme.components.Badge, {
-    variants,
-    baseStyle,
-    defaultProps,
-});

package/styles/components/Button/Button.jsx

@@ -1,31 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Button as ChakraButton} from '@chakra-ui/react';
-
-import ButtonProps from './button-props';
-
-const anchorProps = (isExternal = false) => ({
-    as: 'a',
-    type: null,
-    ...(isExternal && {
-        target: '_blank',
-        rel: 'noopener noreferrer',
-    }),
-});
-
-const Button = forwardRef(({asAnchor, isExternal, ...props}, ref) => (
-    <ChakraButton
-        iconSpacing={2}
-        {...props}
-        {...((asAnchor || props.as === 'a') && anchorProps(isExternal))}
-        ref={ref}
-    />
-));
-
-Button.propTypes = ButtonProps;
-
-Button.defaultProps = {
-    variant: 'primary',
-    type: 'button',
-};
-
-export default Button;

package/styles/components/Button/Button.spec.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import {render, screen} from '@testing-library/react';
-
-import Button from './Button';
-
-describe('Button', () => {
-    it('renders the anchor version of the button', () => {
-        render(
-            <Button asAnchor href="#">
-                Button
-            </Button>
-        );
-
-        expect(screen.getByRole('link')).toBeInTheDocument();
-    });
-
-    it('renders with target and rel attributes on external anchor button', () => {
-        render(
-            <Button asAnchor isExternal href="#">
-                Button
-            </Button>
-        );
-
-        const link = screen.getByRole('link');
-
-        expect(link).toHaveAttribute('target', '_blank');
-        expect(link).toHaveAttribute('rel', 'noopener noreferrer');
-    });
-});

package/styles/components/Button/Button.styles.js

@@ -1,156 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    px: 8,
-    py: 3,
-    fontSize: 'base',
-    fontFamily: 'body',
-    lineHeight: 0.875,
-    fontWeight: 'semibold',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    borderRadius: '1.25rem',
-    textTransform: 'capitalize',
-    transition: 'all 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94)',
-    _disabled: {
-        cursor: 'not-allowed',
-        opacity: 1,
-        bg: 'gray.medium',
-        borderColor: 'gray.medium',
-        color: 'gray.dark',
-    },
-    '& svg': {
-        display: 'block',
-    },
-};
-// TODO: We need an active styling
-const disabledButtonHoverStyle = {
-    _disabled: {
-        bg: 'gray.medium',
-        borderColor: 'gray.medium',
-        color: 'gray.dark',
-    },
-};
-
-const destructiveButtonStyles = {
-    bg: 'white',
-    borderColor: 'red.default',
-    color: 'red.default',
-    _hover: {
-        borderColor: 'red.800',
-        color: 'red.800',
-        ...disabledButtonHoverStyle,
-    },
-};
-
-export const variants = {
-    primary: {
-        bg: 'primary.default',
-        borderColor: 'primary.default',
-        color: 'white',
-        _hover: {
-            bg: 'primary.600',
-            borderColor: 'primary.600',
-            color: 'white',
-            ...disabledButtonHoverStyle,
-        },
-    },
-    primaryOnDark: {
-        bg: 'yellow.default',
-        borderColor: 'yellow.default',
-        color: 'black',
-        _hover: {
-            bg: 'yellow.500',
-            borderColor: 'yellow.500',
-            color: 'black',
-            ...disabledButtonHoverStyle,
-        },
-        _focus: {
-            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
-        },
-    },
-    secondary: {
-        bg: 'white',
-        borderColor: 'gray.medium',
-        color: 'primary.default',
-        _hover: {
-            borderColor: 'primary.600',
-            color: 'primary.600',
-            ...disabledButtonHoverStyle,
-        },
-    },
-    secondaryOnDark: {
-        bg: 'none',
-        borderColor: 'white',
-        color: 'white',
-        _hover: {
-            bg: 'white',
-            borderColor: 'white',
-            color: 'black',
-            ...disabledButtonHoverStyle,
-        },
-        _focus: {
-            boxShadow: '0 0 0 3px rgba(255, 255, 255, 0.7)',
-        },
-    },
-    tertiary: {
-        bg: 'none',
-        borderWidth: 'none',
-        borderRadius: 'unset',
-        color: 'primary.default',
-        h: 'unset',
-        m: 'unset',
-        minW: 'unset',
-        p: 'unset',
-        lineHeight: 1,
-        _disabled: {
-            bg: 'none',
-            color: 'gray.dark',
-        },
-        _hover: {
-            color: 'primary.600',
-            _disabled: {
-                color: 'gray.dark',
-            },
-        },
-    },
-    tertiaryOnDark: {
-        bg: 'none',
-        borderRadius: 'unset',
-        borderWidth: 'none',
-        color: 'white',
-        h: 'unset',
-        m: 'unset',
-        minW: 'unset',
-        p: 'unset',
-        _disabled: {
-            bg: 'none',
-            color: 'white',
-            opacity: '.7',
-        },
-        _hover: {
-            color: 'white',
-            opacity: '.8',
-            _disabled: {
-                opacity: '.7',
-            },
-        },
-    },
-    destructive: {
-        ...destructiveButtonStyles,
-    },
-    destructiveOnDark: {
-        ...destructiveButtonStyles,
-    },
-};
-
-const defaultProps = {
-    size: null,
-};
-
-export default merge(chakraDefaultTheme.components.Button, {
-    variants,
-    baseStyle,
-    defaultProps,
-});

package/styles/components/Button/button-props.js

@@ -1,66 +0,0 @@
-import PropTypes from 'prop-types';
-import {variants} from './Button.styles';
-
-const props = {
-    /**
-     * Alters the underlying html tag
-     */
-    as: PropTypes.string,
-    /**
-     * If `true`, the button will render as an anchor.
-     */
-    asAnchor: PropTypes.bool,
-    /**
-     * If `true`, and an anchor button, target="_blank" and rel="noopener noreferrer" will be set on the anchor
-     * "isExternal" is used to maintain parity with the Link component.
-     */
-    isExternal: PropTypes.bool,
-    /**
-     * If `true`, the button will show a spinner.
-     */
-    isLoading: PropTypes.bool,
-    /**
-     * If `true`, the button will be styled in its active state.
-     */
-    isActive: PropTypes.bool,
-    /**
-     * If `true`, the button will be disabled.
-     */
-    isDisabled: PropTypes.bool,
-    /**
-     * The label to show in the button when `isLoading` is true
-     * If no text is passed, it only shows the spinner
-     */
-    loadingText: PropTypes.string,
-    /**
-     * If `true`, the button will take up the full width of its container.
-     */
-    isFullWidth: PropTypes.bool,
-    /**
-     * The html button type to use.
-     */
-    type: PropTypes.oneOf(['button', 'reset', 'submit']),
-    /**
-     * If added, the button will show an icon before the button's label.
-     * @type PropTypes.node
-     */
-    leftIcon: PropTypes.node,
-    /**
-     * If added, the button will show an icon after the button's label.
-     * @type PropTypes.node
-     */
-    rightIcon: PropTypes.node,
-    /**
-     * The space between the button icon and label.
-     * @type SystemProps["marginRight"]
-     */
-    iconSpacing: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-    /**
-     * Replace the spinner component when `isLoading` is set to `true`
-     * @type PropTypes.node
-     */
-    spinner: PropTypes.node,
-    variant: PropTypes.oneOf(Object.keys(variants)),
-};
-
-export default props;

package/styles/components/Button/index.js

@@ -1,2 +0,0 @@
-export {default as Button} from './Button';
-export {ButtonGroup} from '@chakra-ui/react';

package/styles/components/Button/stories/button.js

@@ -1,59 +0,0 @@
-import React from 'react';
-import capitalize from 'lodash/capitalize';
-import {Box, Text} from '@chakra-ui/react';
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import ButtonProps from 'components/Button/button-props';
-
-const ButtonTemplate = (props, {hasDarkBackground}) => {
-    const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;
-
-    return (
-        <Box>
-            <Box mb={4}>
-                <Text
-                    mb="2"
-                    color={
-                        hasDarkBackground
-                            ? 'text.primary.dark'
-                            : 'text.primary.light'
-                    }
-                >
-                    {capitalize(props.variant)}:
-                </Text>
-                <Box>
-                    <Component {...props} variant={variant} mr={4} mb={4}>
-                        {props.variant} Variant
-                    </Component>
-
-                    <Component
-                        leftIcon={<IconCheck width="1rem" />}
-                        {...props}
-                        variant={variant}
-                        mr={4}
-                        mb={4}
-                    >
-                        {props.variant} With Icon
-                    </Component>
-
-                    <Component
-                        {...props}
-                        variant={variant}
-                        as="a"
-                        href="http://spothero.com"
-                        isExternal={false}
-                        mr={4}
-                        mb={4}
-                    >
-                        As Anchor
-                    </Component>
-                </Box>
-            </Box>
-        </Box>
-    );
-};
-
-ButtonTemplate.propTypes = ButtonProps;
-
-export default ButtonTemplate;

package/styles/components/Button/stories/index.stories.js

@@ -1,82 +0,0 @@
-import ButtonTemplate from './button';
-import OverviewTemplate from './overview';
-
-import Button from '../Button';
-import disableArgs from 'storybook/utils/disable-args';
-import {createSelectControl} from 'storybook/utils/create-control';
-
-export default {
-    title: 'v2/Button',
-    component: {Button},
-    parameters: {
-        importBy: 'Button',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/form/button',
-    },
-    argTypes: {
-        ...disableArgs('children'),
-        onClick: {action: 'clicked'},
-    },
-};
-
-export const Overview = OverviewTemplate.bind({});
-
-export const Primary = ButtonTemplate.bind({});
-Primary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Primary.args = {
-    children: 'Primary',
-    variant: 'primary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Secondary = ButtonTemplate.bind({});
-Secondary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Secondary.args = {
-    children: 'Secondary',
-    variant: 'secondary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Tertiary = ButtonTemplate.bind({});
-Tertiary.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Tertiary.args = {
-    children: 'tertiary',
-    variant: 'tertiary',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};
-
-export const Destructive = ButtonTemplate.bind({});
-Destructive.argTypes = {
-    ...createSelectControl('type', ['button', 'reset', 'submit']),
-    ...disableArgs('variant'),
-    onClick: {action: 'clicked'},
-};
-Destructive.args = {
-    children: 'destructive',
-    variant: 'destructive',
-    isDisabled: false,
-    isLoading: false,
-    loadingText: 'Loading',
-    isFullWidth: false,
-};