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

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

@@ -1,98 +0,0 @@
-import React from 'react';
-import colors from '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/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/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/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/components/Switch/index.js

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

package/styles/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/components/Table/Table.jsx

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

package/styles/components/Table/Table.stories.js

@@ -1,90 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Table';
-import {variants} from './Table.styles';
-import {Thead, Tbody, Tr, Th, Td} from './index';
-
-export default {
-    title: 'v2/Table',
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        numberOfColumns: {
-            table: {
-                disable: true,
-            },
-        },
-        numberOfRows: {
-            table: {
-                disable: true,
-            },
-        },
-        tableData: {
-            table: {
-                disable: true,
-            },
-        },
-        tableHeading: {
-            table: {
-                disable: true,
-            },
-        },
-        variant: {
-            control: {
-                type: 'select',
-                options: Object.keys(variants),
-            },
-        },
-    },
-};
-
-const TableTemplate = ({
-    numberOfColumns,
-    numberOfRows,
-    tableData,
-    tableHeading,
-    variant,
-}) => {
-    return (
-        <Component variant={variant}>
-            <Thead>
-                <Tr>
-                    {Array(numberOfColumns)
-                        .fill(tableHeading)
-                        .map((heading, index) => (
-                            <Th key={index}>{heading}</Th>
-                        ))}
-                </Tr>
-            </Thead>
-            <Tbody>
-                {Array(numberOfRows)
-                    .fill(Array(numberOfColumns).fill(tableData))
-                    .map((row, i) => (
-                        <Tr key={i}>
-                            {row.map((data, index) => (
-                                <Td key={index}>{data}</Td>
-                            ))}
-                        </Tr>
-                    ))}
-            </Tbody>
-        </Component>
-    );
-};
-
-TableTemplate.propTypes = {
-    numberOfColumns: PropTypes.number,
-    numberOfRows: PropTypes.number,
-    tableData: PropTypes.string,
-    tableHeading: PropTypes.string,
-    variant: PropTypes.string,
-};
-
-export const Table = TableTemplate.bind({});
-Table.args = {
-    numberOfColumns: 3,
-    numberOfRows: 3,
-    tableData: 'Table cell data',
-    tableHeading: 'Column Heading',
-};

package/styles/components/Table/Table.styles.js

@@ -1,66 +0,0 @@
-import {variants as headingVariants} from 'components/Heading/Heading.styles';
-
-const parts = ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption'];
-
-const baseStyle = {
-    table: {
-        borderCollapse: 'collapse',
-        color: 'text.primary.light',
-        width: '100%',
-    },
-    thead: {
-        borderBottom: '1px',
-        borderColor: 'gray.medium',
-    },
-    th: {
-        fontFamily: 'heading',
-        fontSize: headingVariants.h4.fontSize,
-        fontWeight: 'semibold',
-        letterSpacing: 'unset',
-        padding: 4,
-        textAlign: 'start',
-        textTransform: 'none',
-    },
-    tr: {
-        borderBottom: '1px',
-        borderColor: 'gray.medium',
-        _last: {
-            border: 'none',
-        },
-    },
-    td: {
-        padding: 4,
-        textAlign: 'start',
-    },
-};
-
-const roundedWhiteVariant = {
-    table: {
-        backgroundColor: 'background.white',
-        borderRadius: 6,
-        boxShadow: 'md',
-        marginBottom: 1,
-    },
-};
-const roundedGrayVariant = {
-    table: {
-        ...roundedWhiteVariant.table,
-        backgroundColor: 'background.gray',
-    },
-};
-
-export const variants = {
-    rounded: roundedWhiteVariant,
-    roundedGray: roundedGrayVariant,
-};
-
-const defaultProps = {
-    variant: 'rounded',
-};
-
-export default {
-    parts,
-    variants,
-    baseStyle,
-    defaultProps,
-};

package/styles/components/Table/index.js

@@ -1,2 +0,0 @@
-export {default as Table} from './Table';
-export {Thead, Tbody, Tfoot, Tr, Th, Td, TableCaption} from '@chakra-ui/react';

package/styles/components/Tabs/Tabs.jsx

@@ -1,38 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Tabs as ChakraTabs, forwardRef} from '@chakra-ui/react';
-import combineSizeWithVariant from './combineSizeWithVariant';
-
-export const SIZE_SMALL = 'small';
-export const SIZE_BODY = 'body';
-export const SIZE_HEADING = 'heading';
-
-const sizeMapping = {
-    [SIZE_SMALL]: 'sm',
-    [SIZE_BODY]: 'md',
-    [SIZE_HEADING]: 'lg',
-};
-
-const Tabs = forwardRef(({size, ...props}, ref) => {
-    return (
-        <ChakraTabs
-            size={sizeMapping[size]}
-            {...props}
-            {...combineSizeWithVariant({size})}
-            ref={ref}
-        />
-    );
-});
-
-Tabs.defaultProps = {
-    size: SIZE_BODY,
-};
-
-Tabs.propTypes = {
-    /** The React node that will render inside the element */
-    children: PropTypes.node,
-    /** Controls the size of Tabs */
-    size: PropTypes.oneOf([SIZE_SMALL, SIZE_BODY, SIZE_HEADING]),
-};
-
-export default Tabs;

package/styles/components/Tabs/Tabs.stories.js

@@ -1,47 +0,0 @@
-import React from 'react';
-
-import Component, {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from './Tabs';
-import {TabList, TabPanels, Tab, TabPanel} from './index';
-
-export default {
-    title: 'v2/Tabs',
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        size: {
-            control: {
-                type: 'select',
-                options: [SIZE_SMALL, SIZE_BODY, SIZE_HEADING],
-            },
-        },
-    },
-};
-
-const TabsTemplate = props => {
-    return (
-        <Component variant="line" {...props}>
-            <TabList>
-                <Tab>One</Tab>
-                <Tab>Two</Tab>
-                <Tab>Three</Tab>
-            </TabList>
-
-            <TabPanels>
-                <TabPanel>
-                    <p>one!</p>
-                </TabPanel>
-                <TabPanel>
-                    <p>two!</p>
-                </TabPanel>
-                <TabPanel>
-                    <p>three!</p>
-                </TabPanel>
-            </TabPanels>
-        </Component>
-    );
-};
-
-TabsTemplate.propTypes = {};
-
-export const Tabs = TabsTemplate.bind({});

package/styles/components/Tabs/combineSizeWithVariant.js

@@ -1,31 +0,0 @@
-import styles from './styles/index';
-import {fontSizes} from 'theme/base/typography';
-import {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from './Tabs';
-
-/**
- * ### `combineSizeWithVariant`
- * A function that takes in the `size` value, and the
- * `variant` value. The default-like styling for the `size` prop is merged with the styling from the
- * `variant` and a combined styleProp object is returned.
- *
- * @function combineSizeWithVariant
- * @param {string} args.size - The size of Tabs component
- * @param {string} args.variant - The style variant for the Text component
- * @returns {Object} An object containing the merged styleProps from the `variant` and the `size` props
- */
-
-const combineSizeWithVariant = ({size, variant = 'line'}) => {
-    const fontSizeMapping = {
-        [SIZE_SMALL]: fontSizes.xs,
-        [SIZE_BODY]: fontSizes.base,
-        [SIZE_HEADING]: fontSizes.lg,
-    };
-
-    const styleProps = styles.variants[`${variant}`];
-
-    styleProps.tab.fontSize = fontSizeMapping[size];
-
-    return styleProps;
-};
-
-export default combineSizeWithVariant;

package/styles/components/Tabs/index.js

@@ -1,2 +0,0 @@
-export {default} from './Tabs';
-export {TabList, TabPanels, Tab, TabPanel} from '@chakra-ui/react';

package/styles/components/Tabs/styles/index.js

@@ -1,40 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const variants = {
-    line: {
-        tablist: {
-            borderBottom: '2px solid',
-            borderColor: 'inherit',
-        },
-        tab: {
-            color: 'gray.600',
-            borderBottom: '2px solid',
-            borderColor: 'transparent',
-            marginBottom: '-2px',
-            _selected: {
-                color: 'primary.default',
-                borderColor: 'primary.default',
-                fontWeight: 'semibold',
-            },
-            _focus: {
-                boxShadow: 'none',
-            },
-            _active: {
-                color: 'black',
-                bg: 'transparent',
-            },
-            _disabled: {
-                opacity: 0.4,
-                cursor: 'not-allowed',
-            },
-            _hover: {
-                color: 'black'
-            }
-        },
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Tabs, {
-    variants,
-});

package/styles/components/Text/Text.jsx

@@ -1,35 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import {Text as ChakraText, forwardRef} from '@chakra-ui/react';
-
-import asOptions from './options';
-import {variants} from './Text.styles';
-import combineAsWithVariant from './combineAsWithVariant';
-
-const Text = forwardRef(({as, variant, ...props}, ref) => {
-    return (
-        <ChakraText
-            variant={variant}
-            as={as}
-            {...combineAsWithVariant({as, variant})}
-            {...props}
-            ref={ref}
-        />
-    );
-});
-
-Text.defaultProps = {
-    as: 'p',
-    variant: 'body',
-};
-
-Text.propTypes = {
-    /** The React node that will render inside the element */
-    children: PropTypes.node,
-    /** Controls the underlying styling of the html heading tag */
-    as: PropTypes.oneOf(asOptions),
-    /** The styling that will be applied to the component regardless of the underlying html */
-    variant: PropTypes.oneOf(Object.keys(variants)),
-};
-
-export default Text;