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

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

@@ -1,73 +0,0 @@
-import React from 'react';
-import capitalize from 'lodash/capitalize';
-import {Box} from '@chakra-ui/react';
-
-import IconCheck from '@spothero/icons/check';
-
-import Component from '../Button';
-import {variants} from '../Button.styles';
-import Text from 'components/Text/Text';
-
-const variationsArray = ({baseVariantName, hasDarkBackground}) => {
-    const variant = `${baseVariantName}${hasDarkBackground ? 'OnDark' : ''}`;
-
-    return [
-        {
-            variant,
-            children: variant,
-        },
-        {
-            variant,
-            children: `${variant} isDisabled`,
-            isDisabled: true,
-        },
-        {
-            variant,
-            children: `${variant} isLoading`,
-            isLoading: true,
-            loadingText: 'loading (optional)',
-        },
-        {
-            variant,
-            children: `leftIcon`,
-            leftIcon: <IconCheck width="1rem" />,
-        },
-        {
-            variant,
-            children: `${variant} asAnchor`,
-            asAnchor: true,
-            href: '#',
-        },
-    ];
-};
-
-const OverviewTemplate = (args, {hasDarkBackground}) => (
-    <Box>
-        {Object.keys(variants)
-            .filter(name => !/ondark/i.test(name))
-            .map((baseVariantName, index) => (
-                <Box key={index} mb={4}>
-                    <Text
-                        mb="2"
-                        color={
-                            hasDarkBackground
-                                ? 'text.primary.dark'
-                                : 'text.primary.light'
-                        }
-                    >
-                        {capitalize(baseVariantName)}:
-                    </Text>
-                    <Box>
-                        {variationsArray({
-                            baseVariantName,
-                            hasDarkBackground,
-                        }).map((props, key) => (
-                            <Component key={key} {...props} mr={4} mb={4} />
-                        ))}
-                    </Box>
-                </Box>
-            ))}
-    </Box>
-);
-
-export default OverviewTemplate;

package/styles/components/Card/Card.jsx

@@ -1,16 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Box} from '@chakra-ui/react';
-
-const Card = forwardRef((props, ref) => (
-    <Box
-        position="relative"
-        padding={4}
-        bgColor="background.white"
-        borderRadius="lg"
-        boxShadow="md"
-        {...props}
-        ref={ref}
-    />
-));
-
-export default Card;

package/styles/components/Card/Card.stories.js

@@ -1,33 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-import Component from './Card';
-
-export default {
-    title: 'v2/Card',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-/*
-    Storybook's background is white so the Card is hard to see.
-    The Card is typically displayed against a light gray background.
-*/
-const Template = props => (
-    <Box backgroundColor="gray.light" padding={8}>
-        <Component {...props} />
-    </Box>
-);
-
-Template.propTypes = {
-    children: PropTypes.node,
-};
-
-export const Card = Template.bind({});
-
-Card.args = {
-    children:
-        'Bonbon lollipop tiramisu cupcake bear claw cupcake. Icing candy canes cookie caramels wafer tootsie roll soufflé halvah. Ice cream tart gummies apple pie chocolate bar. Pastry gummies macaroon fruitcake donut sweet caramels candy. Oat cake marshmallow biscuit carrot cake fruitcake brownie pastry liquorice liquorice. Topping sweet gingerbread. Chupa chups caramels brownie. Icing jujubes chupa chups cookie. Carrot cake gummi bears powder apple pie donut pudding macaroon. Icing jelly cupcake powder jelly croissant pastry. Powder jelly fruitcake gummies sweet tootsie roll candy. Icing cheesecake toffee tart pastry lemon drops lemon drops bonbon wafer. Cheesecake ice cream wafer apple pie candy canes croissant. Sweet croissant pudding carrot cake oat cake chupa chups. Gingerbread lemon drops biscuit oat cake carrot cake. Chocolate cake jelly-o cake cake candy lollipop.',
-};

package/styles/components/Checkbox/Checkbox.jsx

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

package/styles/components/Checkbox/Checkbox.stories.js

@@ -1,41 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-import Component from './Checkbox';
-
-export default {
-    title: 'v2/Checkbox',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const CheckboxTemplate = props => <Component {...props} />;
-
-CheckboxTemplate.propTypes = {
-    isChecked: PropTypes.bool,
-    isDisabled: PropTypes.bool,
-    isIndeterminate: PropTypes.bool,
-    defaultIsChecked: PropTypes.bool,
-    size: PropTypes.oneOf(['sm', 'md', 'lg']),
-    children: PropTypes.node,
-};
-
-export const Checkbox = CheckboxTemplate.bind({});
-
-Checkbox.argTypes = {
-    size: {
-        options: ['sm', 'md', 'lg'],
-        control: {type: 'select'},
-    },
-};
-
-Checkbox.args = {
-    defaultIsChecked: true,
-    isChecked: true,
-    isDisabled: false,
-    isIndeterminate: false,
-    size: 'md',
-    children: 'R U Cool',
-};

package/styles/components/Checkbox/index.js

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

package/styles/components/Checkbox/styles/index.js

@@ -1,31 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-const baseStyle = {
-    control: {
-        borderWidth: '2px',
-        borderStyle: 'solid',
-        borderImage: 'initial',
-        borderRadius: 'var(--chakra-radii-sm)',
-        borderColor: 'gray.200',
-        _hover: {borderColor: 'gray.300'},
-        _readOnly: {boxShadow: 'none !important', userSelect: 'all'},
-        _disabled: {
-            opacity: 0.4,
-            cursor: 'not-allowed',
-            _hover: {borderColor: 'gray.200'},
-        },
-        _focus: {
-            zIndex: 1,
-            borderColor: 'primary.400',
-            boxShadow: t => `0 0 0 1px ${t.colors.primary['400']}`,
-        },
-    },
-    label: {
-        _disabled: {opacity: 0.4, cursor: 'not-allowed'},
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Checkbox, {
-    baseStyle,
-});

package/styles/components/Container/Container.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {Container as ChakraContainer} from '@chakra-ui/react';
-
-import styleProps from './Container.styles';
-
-const Container = forwardRef((props, ref) => (
-    <ChakraContainer {...styleProps} {...props} ref={ref} />
-));
-
-export default Container;

package/styles/components/Container/Container.stories.js

@@ -1,52 +0,0 @@
-import React from 'react';
-import Component from './Container';
-import {useTheme, useToken, useBreakpointValue} from '@chakra-ui/react';
-import {createSelectControl} from 'storybook/utils/create-control';
-import {getAllColors} from 'storybook/utils/get-all-colors';
-import {getAllSizes} from 'storybook/utils/get-all-sizes';
-import PropTypes from 'prop-types';
-
-import styleProps from './Container.styles';
-
-export default {
-    title: 'v2/Container',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-};
-
-const ContainerTemplate = props => {
-    const {remToPixels} = useTheme();
-    const breakpoint = useBreakpointValue(styleProps.maxW);
-    const size = useToken('sizes', breakpoint);
-    const isMobile = breakpoint?.includes('base');
-    const headingText = size
-        ? `Container: ${size}${isMobile ? '' : ` - ${remToPixels(size)}px`}`
-        : '';
-
-    return <Component {...props}>{headingText}</Component>;
-};
-
-ContainerTemplate.propTypes = {
-    color: PropTypes.oneOf(getAllColors),
-    bg: PropTypes.oneOf(getAllColors),
-    h: PropTypes.oneOf(getAllSizes),
-    centerContent: PropTypes.bool,
-    children: PropTypes.node,
-};
-
-export const Container = ContainerTemplate.bind({});
-
-Container.argTypes = {
-    ...createSelectControl('color', getAllColors),
-    ...createSelectControl('bg', getAllColors),
-    ...createSelectControl('h', getAllSizes),
-};
-
-Container.args = {
-    color: 'white',
-    bg: 'secondary.default',
-    h: '20',
-    centerContent: true,
-};

package/styles/components/Container/Container.styles.js

@@ -1,11 +0,0 @@
-const styles = {
-    px: 4,
-    mx: 'auto',
-    maxW: {
-        base: 'container.base',
-        tablet: 'container.tablet',
-        desktop: 'container.desktop',
-    },
-};
-
-export default styles;

package/styles/components/Divider/Divider.jsx

@@ -1,31 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Divider as ChakraDivider} from '@chakra-ui/react';
-import {colorScheme} from './Divider.styles';
-
-const Divider = forwardRef(
-    ({variant, colorScheme: borderColor, ...props}, ref) => {
-        return (
-            <ChakraDivider
-                {...colorScheme[borderColor]}
-                variant={variant}
-                {...props}
-                ref={ref}
-            />
-        );
-    }
-);
-
-Divider.propTypes = {
-    /** Color scheme used */
-    colorScheme: PropTypes.oneOf(['low', 'medium']),
-    /** The styling that will be applied to the HR tag */
-    variant: PropTypes.oneOf(['solid', 'dashed']),
-};
-
-Divider.defaultProps = {
-    variant: 'solid',
-    colorScheme: 'medium',
-};
-
-export default Divider;

package/styles/components/Divider/Divider.stories.js

@@ -1,41 +0,0 @@
-import React from 'react';
-
-import {colorScheme} from './Divider.styles';
-
-import Component from './Divider';
-
-import {Box, Text} from '@chakra-ui/react';
-
-export default {
-    title: 'v2/Divider',
-    component: Component,
-    argTypes: {
-        colorScheme: {
-            control: {
-                type: 'select',
-                options: Object.keys(colorScheme),
-            },
-        },
-        variant: {
-            control: {
-                type: 'select',
-                options: ['solid', 'dashed'],
-            },
-        },
-    },
-};
-
-const Template = props => (
-    <Box>
-        <Text>Over HowdyHowdyHowdy</Text>
-        <Component {...props} />
-        <Text>Under HowdyHowdyHowdy</Text>
-    </Box>
-);
-
-export const Divider = Template.bind({});
-
-Divider.args = {
-    variant: 'solid',
-    colorScheme: 'medium',
-};

package/styles/components/Divider/Divider.styles.js

@@ -1,15 +0,0 @@
-import merge from 'lodash/merge';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-export const colorScheme = {
-    low: {
-        borderColor: 'gray.100',
-    },
-    medium: {
-        borderColor: 'gray.200',
-    },
-};
-
-export default merge(chakraDefaultTheme.components.Divider, {
-    colorScheme,
-});

package/styles/components/FormControl/FormControl.jsx

@@ -1,79 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {
-    FormControl as ChakraFormControl,
-    FormHelperText,
-    FormLabel,
-    FormErrorMessage,
-    Text,
-} from '@chakra-ui/react';
-
-const FormControl = forwardRef(
-    (
-        {
-            children,
-            label,
-            inputId,
-            helperText,
-            errorMessage,
-            isFieldset,
-            ...props
-        },
-        ref
-    ) => (
-        <ChakraFormControl
-            {...props}
-            ref={ref}
-            as={isFieldset ? 'fieldset' : 'div'}
-            borderWidth="0"
-        >
-            {label && (
-                <FormLabel
-                    color="gray.600"
-                    fontWeight="semibold"
-                    marginBottom={helperText ? 0 : 1}
-                    fontSize="sm"
-                    htmlFor={inputId}
-                    as={isFieldset ? 'legend' : 'label'}
-                    requiredIndicator=""
-                    optionalIndicator={
-                        props?.isOptional && !props?.isRequired ? (
-                            <Text
-                                marginLeft={1}
-                                as="span"
-                                variant="caption"
-                                color="text.secondary.light"
-                            >
-                                Optional
-                            </Text>
-                        ) : null
-                    }
-                >
-                    {label}
-                </FormLabel>
-            )}
-            {helperText && (
-                <FormHelperText color="gray.600" marginBottom={1} fontSize="xs">
-                    {helperText}
-                </FormHelperText>
-            )}
-            {children}
-            <FormErrorMessage color="error" mt={1} fontSize="xs">
-                {errorMessage}
-            </FormErrorMessage>
-        </ChakraFormControl>
-    )
-);
-
-FormControl.propTypes = {
-    inputId: PropTypes.string.isRequired,
-    label: PropTypes.string,
-    helperText: PropTypes.string,
-    errorMessage: PropTypes.string,
-    children: PropTypes.element,
-    isFieldset: PropTypes.bool,
-    isOptional: PropTypes.bool,
-    isRequired: PropTypes.bool,
-};
-
-export default FormControl;

package/styles/components/Grid/Grid.jsx

@@ -1,25 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Grid as ChakraGrid} from '@chakra-ui/react';
-
-import {baseStyles, compactStyles} from './Grid.styles';
-
-const Grid = forwardRef(({isCompact, ...props}, ref) => (
-    <ChakraGrid
-        {...baseStyles}
-        {...(isCompact && compactStyles)}
-        {...props}
-        ref={ref}
-    />
-));
-
-Grid.propTypes = {
-    /** This will reduce the grid gap by half */
-    isCompact: PropTypes.bool,
-};
-
-Grid.defaultProps = {
-    isCompact: false,
-};
-
-export default Grid;

package/styles/components/Grid/Grid.stories.js

@@ -1,128 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Box} from '@chakra-ui/react';
-
-import GridComponent from './Grid';
-
-import {GridItem as GridItemComponent, Container} from 'components';
-
-const rangeControl = (max, min = 1) => ({
-    control: {
-        max,
-        min,
-        step: 1,
-        type: 'range',
-    },
-});
-
-const SHARED_CHILD_PROPS = {
-    isCompact: PropTypes.bool,
-};
-
-const spanMap = {
-    1: 12,
-    2: 6,
-    3: 4,
-    4: 3,
-};
-
-export default {
-    title: 'v2/Grid',
-    component: GridComponent,
-    subcomponents: {GridItemComponent},
-    parameters: {
-        removeBaseHtmlClass: true,
-    },
-    argTypes: {
-        isCompact: {
-            control: 'boolean',
-        },
-    },
-};
-const GridTemplate = (args, {hasDarkBackground}) => (
-    <Container>
-        <GridComponent
-            {...args}
-            bg={hasDarkBackground ? 'secondary.700' : 'secondary.default'}
-        >
-            {Array(12)
-                .fill(null)
-                .map((Item, index) => (
-                    <GridItemComponent key={`GridItem-${index}`} colSpan={1}>
-                        <Box
-                            h="20rem"
-                            bg={
-                                hasDarkBackground
-                                    ? 'primary.400'
-                                    : 'primary.default'
-                            }
-                        />
-                    </GridItemComponent>
-                ))}
-        </GridComponent>
-    </Container>
-);
-
-export const Grid = GridTemplate.bind({});
-
-const GridItemTemplate = ({isCompact, ...args}) => (
-    <Container>
-        <GridComponent bg="secondary.default" isCompact={isCompact}>
-            <GridItemComponent {...args}>
-                <Box h="20rem" bg="primary.default" />
-            </GridItemComponent>
-        </GridComponent>
-    </Container>
-);
-
-GridItemTemplate.propTypes = SHARED_CHILD_PROPS;
-
-export const GridItemSpan = GridItemTemplate.bind({});
-GridItemSpan.storyName = 'GridItem - span prop';
-GridItemSpan.argTypes = {
-    colSpan: rangeControl(12),
-};
-GridItemSpan.args = {
-    colSpan: 12,
-};
-
-export const GridItemStartEnd = GridItemTemplate.bind({});
-GridItemStartEnd.storyName = 'GridItem - start/end prop';
-GridItemStartEnd.argTypes = {
-    colStart: rangeControl(12),
-    colEnd: rangeControl(13, 2),
-};
-GridItemStartEnd.args = {
-    colStart: 1,
-    colEnd: 2,
-};
-
-const ColumnLayoutTemplate = ({numberOfColumns}) => (
-    <Container>
-        <GridComponent bg="secondary.default">
-            {Array(numberOfColumns)
-                .fill(null)
-                .map((item, index) => (
-                    <GridItemComponent
-                        key={`GridItem-${index}`}
-                        colSpan={spanMap[numberOfColumns]}
-                    >
-                        <Box h="20rem" bg="primary.default" />
-                    </GridItemComponent>
-                ))}
-        </GridComponent>
-    </Container>
-);
-
-ColumnLayoutTemplate.propTypes = {
-    numberOfColumns: PropTypes.number,
-};
-
-export const GridColumnLayout = ColumnLayoutTemplate.bind({});
-GridColumnLayout.storyName = 'Grid - MultiColumn Layout';
-GridColumnLayout.argTypes = {
-    numberOfColumns: rangeControl(4),
-};
-GridColumnLayout.args = {
-    numberOfColumns: 2,
-};

package/styles/components/Grid/Grid.styles.js

@@ -1,12 +0,0 @@
-// NOTE: considering adding a specifc prop for grid row padding
-export const baseStyles = {
-    gap: {
-        base: 4,
-        tablet: 8,
-    },
-    templateColumns: 'repeat(12, 1fr)',
-};
-
-export const compactStyles = {
-    gap: 4,
-};

package/styles/components/Grid/GridItem.jsx

@@ -1,10 +0,0 @@
-import React, {forwardRef} from 'react';
-import {GridItem as ChakraGridItem} from '@chakra-ui/react';
-
-import styles from './GridItem.styles';
-
-const GridItem = forwardRef((props, ref) => (
-    <ChakraGridItem {...styles} {...props} ref={ref} />
-));
-
-export default GridItem;

package/styles/components/Grid/GridItem.styles.js

@@ -1,8 +0,0 @@
-// NOTE: styles NOT in the Chakra's base styles do not need to explicitly export baseStyles
-// TODO: move this comment to the readme
-
-const styles = {
-    colSpan: 12,
-};
-
-export default styles;

package/styles/components/Grid/index.js

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

package/styles/components/Heading/Heading.jsx

@@ -1,23 +0,0 @@
-import React, {forwardRef} from 'react';
-import PropTypes from 'prop-types';
-import {Heading as ChakraHeading} from '@chakra-ui/react';
-
-import {variants} from './Heading.styles';
-
-const Heading = forwardRef((props, ref) => (
-    <ChakraHeading
-        {...props}
-        ref={ref}
-        variant={props.variant || props.as || 'h2'}
-    />
-));
-
-Heading.propTypes = {
-    /** The React node that will render inside the element */
-    children: PropTypes.node,
-    /** Controls the underlying level of the html heading tag */
-    as: PropTypes.oneOf(Object.keys(variants)),
-    /** The styling that will be applied to the component regardless of the underlying html */
-    variant: PropTypes.oneOf(Object.keys(variants)),
-};
-export default Heading;