@spothero/ui 15.10.9 → 16.0.0-beta.1

package/styles/v2/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/v2/components/Radio/index.js

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

package/styles/v2/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/v2/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/v2/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/v2/components/Select/index.js

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

package/styles/v2/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/v2/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/v2/components/Skeleton/Skeleton.styles.js

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

package/styles/v2/components/Skeleton/index.js

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

package/styles/v2/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;

package/styles/v2/components/Spinner/Spinner.stories.js

@@ -1,98 +0,0 @@
-import React from 'react';
-import colors from 'v2/theme/base/colors';
-
-import {sizes, SIZE_MAP, thicknesses} from './Spinner.styles';
-import {
-    createSelectControl,
-    createRangeControl,
-} from 'storybook/utils/create-control';
-import disableArgs from 'storybook/utils/disable-args';
-
-import Component from './Spinner';
-
-export default {
-    title: 'v2/Spinner',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        importBy: 'Spinner',
-    },
-};
-
-const allColors = Object.entries(colors).reduce((acc, [colorName, color]) => {
-    if (typeof color === 'string') {
-        acc.push(colorName);
-    } else {
-        Object.keys(color).forEach(stop => {
-            acc.push(`${colorName}.${stop}`);
-        });
-    }
-
-    return acc;
-}, []);
-
-const colorControl = key => createSelectControl(key, allColors);
-const Template = props => <Component {...props} />;
-
-export const Overview = Template.bind({});
-Overview.argTypes = {
-    ...colorControl('color'),
-    ...colorControl('emptyColor'),
-    ...createSelectControl('size', Object.keys(sizes)),
-    ...createRangeControl({name: 'thickness', min: 1, max: 100}),
-};
-Overview.args = {
-    speed: '1s',
-    size: SIZE_MAP['2xl'],
-    thickness: thicknesses[SIZE_MAP['2xl']],
-    color: 'primary.default',
-    emptyColor: 'gray.medium',
-};
-
-export const Speed = Template.bind({});
-Speed.argTypes = disableArgs(['size', 'color', 'emptyColor', 'thickness']);
-Speed.args = {
-    speed: '1s',
-    size: SIZE_MAP['2xl'],
-    color: 'primary.default',
-    emptyColor: 'gray.medium',
-    thickness: thicknesses[SIZE_MAP['2xl']],
-};
-
-export const Size = Template.bind({});
-Size.argTypes = {
-    ...createSelectControl('size', Object.keys(sizes)),
-    ...disableArgs(['speed', 'color', 'emptyColor', 'thickness']),
-};
-Size.args = {
-    size: SIZE_MAP['2xl'],
-};
-export const Thickness = Template.bind({});
-Thickness.argTypes = {
-    ...disableArgs(['speed', 'size', 'emptyColor', 'color']),
-    ...createRangeControl({name: 'thickness', min: 1, max: 100}),
-};
-Thickness.args = {
-    thickness: thicknesses[SIZE_MAP['5xl']],
-};
-
-export const Color = Template.bind({});
-Color.argTypes = {
-    ...colorControl('color'),
-    ...disableArgs(['speed', 'size', 'emptyColor', 'thickness']),
-};
-
-Color.args = {
-    thickness: 6,
-    color: 'primary.default',
-};
-export const EmptyColor = Template.bind({});
-EmptyColor.argTypes = {
-    ...colorControl('emptyColor'),
-    ...disableArgs(['speed', 'size', 'color', 'thickness']),
-};
-
-EmptyColor.args = {
-    thickness: 6,
-    emptyColor: 'gray.medium',
-};

package/styles/v2/components/Spinner/Spinner.styles.js

@@ -1,57 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const spinnerStyles = chakraDefaultTheme.components.Spinner;
-
-export const SIZE_MAP = {
-    xs: 'xs',
-    sm: 'sm',
-    md: 'md',
-    lg: 'lg',
-    xl: 'xl',
-    '2xl': '2xl',
-    '3xl': '3xl',
-    '4xl': '4xl',
-    '5xl': '5xl',
-    '6xl': '6xl',
-    '7xl': '7xl',
-    '8xl': '8xl',
-    '9xl': '9xl',
-    '10xl': '10xl',
-};
-
-export const sizes = merge(spinnerStyles.sizes, {
-    [SIZE_MAP['2xl']]: {w: '4rem', h: '4rem'},
-    [SIZE_MAP['3xl']]: {w: '5rem', h: '5rem'},
-    [SIZE_MAP['4xl']]: {w: '6rem', h: '6rem'},
-    [SIZE_MAP['5xl']]: {w: '7rem', h: '7rem'},
-    [SIZE_MAP['6xl']]: {w: '8rem', h: '8rem'},
-    [SIZE_MAP['7xl']]: {w: '9rem', h: '9rem'},
-    [SIZE_MAP['8xl']]: {w: '10rem', h: '10rem'},
-    [SIZE_MAP['9xl']]: {w: '11rem', h: '11rem'},
-    [SIZE_MAP['10xl']]: {w: '12rem', h: '12rem'},
-});
-
-export const thicknesses = {
-    [SIZE_MAP.xl]: 3,
-    [SIZE_MAP['2xl']]: 4,
-    [SIZE_MAP['3xl']]: 5,
-    [SIZE_MAP['4xl']]: 6,
-    [SIZE_MAP['5xl']]: 7,
-    [SIZE_MAP['6xl']]: 8,
-    [SIZE_MAP['7xl']]: 9,
-    [SIZE_MAP['8xl']]: 10,
-    [SIZE_MAP['9xl']]: 11,
-    [SIZE_MAP['10xl']]: 12,
-};
-
-const defaultProps = {
-    speed: '2s',
-    size: SIZE_MAP['2xl'],
-    thickness: thicknesses[SIZE_MAP['2xl']],
-};
-
-export default {
-    sizes,
-    defaultProps,
-};

package/styles/v2/components/Switch/Switch.jsx

@@ -1,52 +0,0 @@
-import React, {forwardRef} from 'react';
-import cn from 'classnames';
-import PropTypes from 'prop-types';
-
-import {Switch as ChakraSwitch} from '@chakra-ui/react';
-
-import FormControl from '../FormControl/FormControl';
-
-const Switch = forwardRef(
-    (
-        {
-            label,
-            helperText,
-            errorMessage,
-            isInvalid,
-            isDisabled,
-            isRequired,
-            ...props
-        },
-        ref
-    ) => {
-        const classes = cn({'FormElement-contains-error': isInvalid});
-
-        return (
-            <FormControl
-                isInvalid={isInvalid}
-                isDisabled={isDisabled}
-                isRequired={isRequired}
-                errorMessage={errorMessage}
-                helperText={helperText}
-                label={label}
-                inputId={props.id}
-            >
-                <ChakraSwitch ref={ref} className={classes} {...props} />
-            </FormControl>
-        );
-    }
-);
-
-Switch.propTypes = {
-    isChecked: PropTypes.bool,
-    defaultChecked: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isRequired: PropTypes.bool,
-};
-
-export default Switch;

package/styles/v2/components/Switch/Switch.stories.js

@@ -1,88 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Switch';
-
-export default {
-    title: 'v2/Switch',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const SwitchTemplate = props => <Component {...props} />;
-
-SwitchTemplate.propTypes = {
-    isChecked: PropTypes.bool,
-    defaultChecked: PropTypes.bool,
-    id: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    isInvalid: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isRequired: PropTypes.bool,
-};
-
-export const Switch = SwitchTemplate.bind({});
-
-Switch.argTypes = {
-    isChecked: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    defaultChecked: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    id: {
-        control: {
-            type: 'text',
-        },
-    },
-    label: {
-        control: {
-            type: 'text',
-        },
-    },
-    helperText: {
-        control: {
-            type: 'text',
-        },
-    },
-    errorMessage: {
-        control: {
-            type: 'text',
-        },
-    },
-    isInvalid: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    isDisabled: {
-        control: {
-            type: 'boolean',
-        },
-    },
-    isRequired: {
-        control: {
-            type: 'boolean',
-        },
-    },
-};
-
-Switch.args = {
-    isChecked: true,
-    defaultChecked: false,
-    id: 'Switch_Id',
-    label: 'Label',
-    helperText: 'Helper Text',
-    errorMessage: 'Error Message',
-    isInvalid: false,
-    isDisabled: false,
-    isRequired: false,
-};

package/styles/v2/components/Switch/index.js

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

package/styles/v2/components/Switch/styles/index.js

@@ -1,17 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const overrides = {
-    defaultProps: {
-        colorScheme: 'primary',
-        size: 'lg',
-    },
-    baseStyle: props =>
-        merge(chakraDefaultTheme.components.Switch.baseStyle(props), {
-            track: {
-                bg: 'gray.medium',
-            },
-        }),
-};
-
-export default {...chakraDefaultTheme.components.Switch, ...overrides};

package/styles/v2/components/Table/Table.jsx

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