@spothero/ui 16.0.0-beta.0 → 16.0.1

package/styles/components/Popover/styles/popover-close-button.js

@@ -1,17 +0,0 @@
-const pseudoStyles = variant => ({
-    bgColor: variant === 'dark' ? 'gray.600' : 'gray.50',
-});
-
-const closeButtonStyles = ({variant}) => ({
-    color: variant === 'dark' ? 'white' : 'black',
-    fontSize: '0.5rem',
-    position: 'absolute',
-    top: 0,
-    right: 0,
-    padding: 4,
-    borderTopRightRadius: 4,
-    _hover: pseudoStyles(variant),
-    _focus: pseudoStyles(variant),
-});
-
-export default closeButtonStyles;

package/styles/components/Popover/styles/popover-content.js

@@ -1,16 +0,0 @@
-const popoverContentStyles = ({variant}) => ({
-    padding: 4,
-    marginBottom: 0,
-    maxWidth: '20rem',
-    borderRadius: 'base',
-    background: variant === 'dark' ? 'secondary.default' : 'white',
-    boxShadow: '2px 2px 4px 0 rgba(0,45,91,0.1)',
-    color: variant === 'dark' ? 'white' : 'black',
-    borderColor: 'gray.100',
-    borderWidth: '1px',
-    borderStyle: 'solid',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
-    zIndex: 'layer10',
-});
-
-export default popoverContentStyles;

package/styles/components/Popover/styles/popover-header.js

@@ -1,6 +0,0 @@
-const headerStyles = {
-    marginBottom: 2,
-    fontWeight: 'semibold',
-};
-
-export default headerStyles;

package/styles/components/Popover/styles/popper.js

@@ -1,5 +0,0 @@
-const popperStyles = {
-    borderRadius: 'base',
-};
-
-export default popperStyles;

package/styles/components/Radio/Radio.jsx

@@ -1,50 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Box, Radio as ChakraRadio} from '@chakra-ui/react';
-
-const Radio = forwardRef(
-    (
-        {
-            defaultChecked,
-            isChecked,
-            isDisabled,
-            value,
-            helperText,
-            children,
-            ...props
-        },
-        ref
-    ) => {
-        return (
-            <ChakraRadio
-                ref={ref}
-                defaultChecked={defaultChecked}
-                isChecked={isChecked}
-                isDisabled={isDisabled}
-                isFocusable={!isDisabled}
-                value={value}
-                alignItems="start"
-                {...props}
-            >
-                {children}
-                {helperText && (
-                    <Box color="gray.600" fontSize="xs">
-                        {helperText}
-                    </Box>
-                )}
-            </ChakraRadio>
-        );
-    }
-);
-
-Radio.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-        .isRequired,
-    defaultChecked: PropTypes.bool,
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    helperText: PropTypes.string,
-};
-
-export default Radio;

package/styles/components/Radio/Radio.stories.js

@@ -1,155 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import Radio from './Radio';
-import RadioGroup from './RadioGroup';
-
-export default {
-    title: 'v2/Radio',
-    component: Radio,
-    parameters: {
-        importBy: 'Radio',
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/components/radio',
-    },
-};
-
-export const Individual = props => {
-    return (
-        <Radio value="1" {...props}>
-            Option 1
-        </Radio>
-    );
-};
-
-Individual.argTypes = {
-    helperText: {
-        control: {type: 'text'},
-    },
-    isDisabled: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    isChecked: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    children: {
-        table: {
-            disable: true,
-        },
-    },
-    defaultChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    value: {
-        table: {
-            disable: true,
-        },
-    },
-};
-
-Individual.args = {
-    helperText: 'Helper text',
-    isDisabled: false,
-    isChecked: false,
-};
-
-Individual.propTypes = {
-    children: PropTypes.oneOfType([PropTypes.string, PropTypes.element])
-        .isRequired,
-    defaultChecked: PropTypes.bool,
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    value: PropTypes.string.isRequired,
-    helperText: PropTypes.string,
-};
-
-export const Group = props => {
-    return (
-        <RadioGroup
-            name="example1"
-            defaultValue="3"
-            id="example1"
-            label="Which option?"
-            {...props}
-        >
-            <Radio value="1">Option 1</Radio>
-            <Radio value="2">Option 2</Radio>
-            <Radio value="3">Option 3</Radio>
-            <Radio value="4">Option 4</Radio>
-        </RadioGroup>
-    );
-};
-
-Group.title = 'v2/RadioGroup';
-Group.component = RadioGroup;
-Group.parameters = {
-    importBy: 'RadioGroup',
-};
-
-Group.argTypes = {
-    direction: {
-        options: ['column', 'row'],
-        control: {
-            type: 'radio',
-        },
-    },
-    isDisabled: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    children: {
-        table: {
-            disable: true,
-        },
-    },
-    defaultChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    value: {
-        table: {
-            disable: true,
-        },
-    },
-    isChecked: {
-        table: {
-            disable: true,
-        },
-    },
-    helperText: {
-        table: {
-            disable: true,
-        },
-    },
-};
-
-Group.args = {
-    direction: 'column',
-    isDisabled: false,
-    isInvalid: false,
-    isRequired: false,
-    label: 'Label',
-    errorMessage: 'Error message',
-};
-
-Group.propTypes = {
-    children: PropTypes.node,
-    defaultValue: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    isInvalid: PropTypes.bool,
-    isRequired: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-    direction: PropTypes.oneOf(['row', 'column']),
-};

package/styles/components/Radio/RadioGroup.jsx

@@ -1,69 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {RadioGroup as ChakraRadioGroup, Stack} from '@chakra-ui/react';
-import FormControl from '../FormControl/FormControl';
-
-const RadioGroup = forwardRef(
-    (
-        {
-            label,
-            errorMessage,
-            defaultValue,
-            isDisabled,
-            isInvalid,
-            isRequired,
-            name,
-            onChange,
-            value,
-            children,
-            direction,
-            ...props
-        },
-        ref
-    ) => {
-        return (
-            <FormControl
-                isInvalid={isInvalid}
-                isDisabled={isDisabled}
-                isRequired={isRequired}
-                errorMessage={errorMessage}
-                label={label}
-                inputId={props.id}
-                isFieldset
-            >
-                <ChakraRadioGroup
-                    ref={ref}
-                    defaultValue={defaultValue}
-                    name={name}
-                    onChange={onChange}
-                    value={value}
-                    {...props}
-                >
-                    <Stack
-                        direction={direction ? direction : 'column'}
-                        spacing={direction === 'row' ? 8 : 4}
-                    >
-                        {children}
-                    </Stack>
-                </ChakraRadioGroup>
-            </FormControl>
-        );
-    }
-);
-
-RadioGroup.propTypes = {
-    children: PropTypes.node,
-    defaultValue: PropTypes.string,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isDisabled: PropTypes.bool,
-    isInvalid: PropTypes.bool,
-    isRequired: PropTypes.bool,
-    name: PropTypes.string,
-    onChange: PropTypes.func,
-    value: PropTypes.string,
-    direction: PropTypes.oneOf(['row', 'column']),
-};
-
-export default RadioGroup;

package/styles/components/Radio/index.js

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

package/styles/components/Radio/styles/index.js

@@ -1,52 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const parts = ['control', 'label'];
-
-const baseStyle = {
-    control: {
-        borderRadius: '50%',
-        borderWidth: '1px',
-        borderColor: 'gray.dark',
-        backgroundColor: 'white',
-        minWidth: 5,
-        minHeight: 5,
-        marginTop: 1,
-        _checked: {
-            borderWidth: 0,
-            color: 'white',
-            backgroundColor: 'primary.default',
-            _before: {
-                content: '""',
-                display: 'inline-block',
-                position: 'relative',
-                width: 2,
-                height: 2,
-                borderRadius: '50%',
-                background: 'currentcolor',
-            },
-        },
-        _focus: {
-            boxShadow: t => `0 0 1px 2px ${t.colors.primary['300']}`,
-        },
-        _disabled: {
-            borderColor: 'gray.200',
-            _checked: {
-                backgroundColor: 'gray.200',
-            },
-        },
-    },
-    label: {
-        fontSize: 'base',
-        color: 'black',
-        marginLeft: 3,
-        _disabled: {
-            color: 'gray.200',
-        },
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Radio, {
-    parts,
-    baseStyle,
-});

package/styles/components/Select/Select.jsx

@@ -1,62 +0,0 @@
-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(
-    (
-        {
-            label,
-            helperText,
-            errorMessage,
-            isInvalid,
-            isDisabled,
-            isRequired,
-            isOptional,
-            ...props
-        },
-        ref
-    ) => {
-        const classes = cn({'FormElement-contains-error': isInvalid});
-
-        return (
-            <FormControl
-                isInvalid={isInvalid}
-                isDisabled={isDisabled}
-                isRequired={isRequired}
-                errorMessage={errorMessage}
-                isOptional={isOptional}
-                helperText={helperText}
-                label={label}
-                inputId={props.id}
-            >
-                <ChakraSelect
-                    icon={<Icon as={IconChevronDown} />}
-                    iconSize={12}
-                    fontWeight="regular"
-                    fontSize="sm"
-                    ref={ref}
-                    className={classes}
-                    {...props}
-                />
-            </FormControl>
-        );
-    }
-);
-
-Select.propTypes = {
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isRequired: PropTypes.bool,
-    isOptional: PropTypes.bool,
-};
-
-export default Select;

package/styles/components/Select/Select.stories.js

@@ -1,60 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Select';
-
-export default {
-    title: 'v2/Select',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const SelectTemplate = props => (
-    <Component variant="outline" maxWidth="200px" {...props}>
-        <option value="one">One</option>
-        <option value="two">Two</option>
-        <option value="three">Three</option>
-        <option value="four">Four</option>
-    </Component>
-);
-
-SelectTemplate.propTypes = {
-    placeholder: PropTypes.string,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isReadOnly: PropTypes.bool,
-};
-
-export const Select = SelectTemplate.bind({});
-
-Select.argTypes = {
-    placeholder: {
-        control: {type: 'text'},
-    },
-    label: {
-        control: {type: 'text'},
-    },
-    helperText: {
-        control: {type: 'text'},
-    },
-    errorMessage: {
-        control: {type: 'text'},
-    },
-};
-
-Select.args = {
-    placeholder: 'Placeholder text',
-    label: 'Label',
-    helperText: 'Helper text',
-    errorMessage: 'Error message',
-    isInvalid: false,
-    isDisabled: false,
-    isReadOnly: false,
-    isRequired: false,
-    isOptional: false,
-};

package/styles/components/Select/index.js

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

package/styles/components/Select/styles/index.js

@@ -1,29 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const variants = {
-    outline: {
-        field: {
-            border: '1px solid',
-            borderColor: 'inherit',
-            bg: 'inherit',
-            _hover: {borderColor: 'gray.300'},
-            _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
-            _disabled: {opacity: 0.4, cursor: 'not-allowed'},
-            _invalid: {
-                borderColor: 'error',
-                boxShadow: t => `0 0 0 1px ${t.colors.error}`,
-            },
-            _focus: {
-                zIndex: 1,
-                borderColor: 'primary.400',
-                boxShadow: t => `0 0 0 1px ${t.colors.primary['400']}`,
-            },
-        },
-        addon: {border: '1px solid', borderColor: 'inherit', bg: 'gray.100'},
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Select, {
-    variants,
-});

package/styles/components/Skeleton/Skeleton.stories.jsx

@@ -1,34 +0,0 @@
-import React from 'react';
-
-import {Skeleton as Component, SkeletonCircle as CircleSkeleton, SkeletonText as TextSkeleton} from './index';
-
-export default {
-    title: 'v2/Skeleton',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        chakraLink: 'https://chakra-ui.com/docs/components/skeleton/',
-    },
-};
-
-const SkeletonTemplate = props => (
-    <Component {...props}>
-        Text
-    </Component>
-);
-
-const SkeletonCircleTemplate = props => (
-    <CircleSkeleton>
-        Text
-    </CircleSkeleton>
-)
-
-const SkeletonTextTemplate = props => (
-    <TextSkeleton>
-        Text
-    </TextSkeleton>
-)
-
-export const Skeleton = SkeletonTemplate.bind({});
-export const SkeletonCircle = SkeletonCircleTemplate.bind({})
-export const SkeletonText = SkeletonTextTemplate.bind({})

package/styles/components/Skeleton/Skeleton.styles.js

@@ -1,3 +0,0 @@
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-export default chakraDefaultTheme.components.Skeleton;

package/styles/components/Skeleton/index.js

@@ -1 +0,0 @@
-export {Skeleton, SkeletonCircle, SkeletonText} from '@chakra-ui/react';

package/styles/components/Spinner/Spinner.jsx

@@ -1,40 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Spinner as ChakraSpinner} from '@chakra-ui/react';
-
-import {thicknesses, SIZE_MAP} from './Spinner.styles';
-
-const Spinner = forwardRef(({size, thickness, ...props}, ref) => {
-    const thicknessString = thickness
-        ? `${thickness}px`
-        : thicknesses[size]
-        ? `${thicknesses[size]}px`
-        : '2px';
-
-    return (
-        <ChakraSpinner
-            ref={ref}
-            role="status"
-            color="primary.default"
-            emptyColor="gray.medium"
-            thickness={thicknessString}
-            size={size || SIZE_MAP['2xl']}
-            {...props}
-        />
-    );
-});
-
-Spinner.propTypes = {
-    /** The main fill color of the spinner */
-    color: PropTypes.string,
-    /** The diameter of the spinner ring in pixels */
-    thickness: PropTypes.number,
-    /** The empty color of the spinner */
-    emptyColor: PropTypes.string,
-    /** The size of the spinner */
-    size: PropTypes.oneOf(Object.keys(SIZE_MAP)),
-    /** The speed of the spinner, ex: 10s, 0.1s, 250ms */
-    speed: PropTypes.string,
-};
-
-export default Spinner;