@spothero/ui 15.10.9 → 16.0.0-beta.1

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

@@ -1,85 +0,0 @@
-import React from 'react';
-import {Box, Code} from '@chakra-ui/react';
-
-import Component from './ThemeProvider';
-import Spaces from 'v2/utils/Spaces';
-import Text from 'v2/components/Text/Text';
-import disableArgs from 'storybook/utils/disable-args';
-
-const Usage = () => {
-    return (
-        <>
-            &#47;&#47; RootComponent.jsx
-            <br />
-            ...
-            <br />
-            return (
-            <br />
-            <Spaces />
-            &lt;ThemeProvider&gt;
-            <br />
-            <Spaces spaces={6} />
-            &lt;App/&gt;
-            <br />
-            <Spaces />
-            &lt;/ThemeProvider&gt;
-            <br />
-            );
-            <br />
-            ...
-        </>
-    );
-};
-
-export default {
-    title: 'v2/ThemeProvider',
-    component: Component,
-    parameters: {
-        removeBaseHtmlClass: true,
-        usage: [<Usage key={1} />],
-    },
-};
-
-const Template = (props, {hasDarkBackground}) => {
-    const contentTextColor = hasDarkBackground
-        ? 'text.primary.dark'
-        : 'text.primary.light';
-
-    return (
-        <Box>
-            <Text mb={8} color={contentTextColor}>
-                As the name implies, this is a theme context provider that all
-                of your v2 components utilize. It is required by all apps moving
-                to v2
-            </Text>
-            <Text />
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider has a <Code>theme</Code> prop that takes a theme
-                object. Unlike how we are both overriding and extending
-                Chakra&apos;s default theme, this property only extends our
-                default theme configuration.
-            </Text>{' '}
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider has a <Code>useLegacyOverrides</Code> prop that is
-                a boolean. If true, the ThemeProvider will insert the typography
-                styling from .spothero-html
-            </Text>{' '}
-            <Text mb={8} color={contentTextColor}>
-                ThemeProvider also has a <Code>disableExternalFonts</Code> prop
-                that is a boolean. If true, the ThemeProvider will not load the
-                font files from Google's CDN, and you will be able to handle
-                fonts on a project-level.
-            </Text>{' '}
-        </Box>
-    );
-};
-
-export const ThemeProvider = Template.bind({});
-ThemeProvider.parameters = {
-    importBy: 'ThemeProvider',
-};
-ThemeProvider.argTypes = disableArgs([
-    'theme',
-    'children',
-    'useLegacyOverrides',
-]);

package/styles/v2/components/index.js

@@ -1,70 +0,0 @@
-export {
-    AccordionIcon,
-    AccordionItem,
-    AccordionPanel,
-    AccordionButton,
-    default as Accordion,
-} from './Accordion';
-export {default as Alert} from './Alert';
-export * from './Button';
-export * from './Table';
-export * from './Skeleton';
-export {TabList, TabPanels, Tab, TabPanel, default as Tabs} from './Tabs';
-export {default as Select} from './Select';
-export {default as Switch} from './Switch';
-export {default as Link} from './Link/Link';
-export {default as Text} from './Text/Text';
-export {default as Grid, GridItem} from './Grid';
-export {default as List, ListItem} from './List';
-export {default as Spinner} from './Spinner/Spinner';
-export {default as Heading} from './Heading/Heading';
-export {default as Container} from './Container/Container';
-export {default as ThemeProvider} from './ThemeProvider/ThemeProvider';
-export {default as Card} from './Card/Card';
-export {default as Icon} from './Icon/Icon';
-export {default as Image} from './Image/Image';
-export {default as Loader} from './Loader/Loader';
-export {default as Checkbox} from './Checkbox';
-export {default as Input} from './Input';
-export {default as Divider} from './Divider/Divider';
-export {
-    Popover,
-    PopoverAnchor,
-    PopoverTrigger,
-    PopoverContent,
-} from './Popover';
-export {Modal} from './Modal';
-export {Radio, RadioGroup} from './Radio';
-export {AutoSuggestSelect} from './AutoSuggestSelect';
-export {default as Badge} from './Badge/Badge';
-
-// generic chakra reexports
-export {
-    Box,
-    Flex,
-    Fade,
-    Slide,
-    Portal,
-    HStack,
-    useToken,
-    useTheme,
-    ScaleFade,
-    SlideFade,
-    createIcon,
-    InputGroup,
-    Breadcrumb,
-    useClipboard,
-    useDisclosure,
-    useMediaQuery,
-    BreadcrumbItem,
-    BreadcrumbLink,
-    InputLeftAddon,
-    InputRightAddon,
-    InputLeftElement,
-    InputRightElement,
-    useBreakpointValue,
-    useControllableProp,
-    Input as BasicInput,
-    useControllableState,
-    usePrefersReducedMotion,
-} from '@chakra-ui/react';

package/styles/v2/components/styles.js

@@ -1,21 +0,0 @@
-export {default as List} from './List/styles';
-export {default as Table} from './Table/Table.styles';
-export {default as Text} from './Text/Text.styles';
-export {default as Link} from './Link/Link.styles';
-export {default as Accordion} from './Accordion/styles';
-export {default as Button} from './Button/Button.styles';
-export {default as GridItem} from './Grid/GridItem.styles';
-export {default as Spinner} from './Spinner/Spinner.styles';
-export {default as Heading} from './Heading/Heading.styles';
-export {default as Divider} from './Divider/Divider.styles';
-export {default as Tabs} from './Tabs/styles';
-export {default as Select} from './Select/styles';
-export {default as Checkbox} from './Checkbox/styles';
-export {default as Alert} from './Alert/styles';
-export {default as Switch} from './Switch/styles';
-export {default as Popover} from './Popover/styles';
-export {default as Input} from './Input/styles';
-export {default as Modal} from './Modal/styles';
-export {default as Radio} from './Radio/styles';
-export {default as Skeleton} from './Skeleton/Skeleton.styles';
-export {default as Badge} from './Badge/styles';

package/styles/v2/theme/base/breakpoints.js

@@ -1,16 +0,0 @@
-import {createBreakpoints} from '@chakra-ui/theme-tools';
-
-/**
- * The "base" breakpoint is Chakra's default non-responsive value (from 0 upwards).
- * While we don't explicitly enable a "mobile" breakpoint, we can consider "base" and
- * "mobile" the same for all intents and purposes for mobile-first responsive styling.
- * @see https://chakra-ui.com/docs/features/responsive-styles#customizing-breakpoints
- */
-const breakpoints = createBreakpoints({
-    mobileXL: '30rem', // 480px
-    tablet: '48rem', // 768px
-    desktop: '64rem', // 1024px
-    desktopXL: '90rem', // 1440px
-});
-
-export default breakpoints;

package/styles/v2/theme/base/colors.js

@@ -1,136 +0,0 @@
-const white = '#ffffff';
-const black = '#000000';
-const brandBlue = '#0082ff';
-
-const gray = {
-    50: '#f6f7f9',
-    100: '#e1e6ec',
-    200: '#cbd4de',
-    300: '#afbdcc',
-    400: '#94a7ba',
-    500: '#7890a8',
-    600: '#537495',
-    700: '#3b5261',
-    800: '#2f3f4b',
-    900: '#26323c',
-};
-
-const blue = {
-    50: '#f6fbfd',
-    100: '#e6f8fd',
-    200: '#c0e9fb',
-    300: '#96d3fa',
-    400: '#5baafa',
-    500: '#1271eb',
-    600: '#1d58f2',
-    700: '#1b46da',
-    800: '#1735a6',
-    900: '#132b7f',
-};
-
-const navy = {
-    50: '#f4fafc',
-    100: '#e4f7fb',
-    200: '#bfebf6',
-    300: '#92d9f4',
-    400: '#51b7f0',
-    500: '#2590ea',
-    600: '#1a6cda',
-    700: '#1b55b6',
-    800: '#194185',
-    900: '#002d5b',
-};
-
-const green = {
-    50: '#ecf8f7',
-    100: '#d3f7ef',
-    200: '#a4f3d9',
-    300: '#65eabf',
-    400: '#1edb96',
-    500: '#09c66a',
-    600: '#08ad50',
-    700: '#008547',
-    800: '#11703e',
-    900: '#115a35',
-};
-
-const yellow = {
-    50: '#f9f5e5',
-    100: '#faf0bd',
-    200: '#f6e67c',
-    300: '#f1d439',
-    400: '#ffbf02',
-    500: '#e19706',
-    600: '#cf7404',
-    700: '#ae5708',
-    800: '#8e440e',
-    900: '#743710',
-};
-
-const red = {
-    50: '#fdf9f8',
-    100: '#fdeef3',
-    200: '#fbcee6',
-    300: '#fba4d1',
-    400: '#fc6bad',
-    500: '#fc4086',
-    600: '#f7265f',
-    700: '#e01438',
-    800: '#b4193c',
-    900: '#901530',
-};
-
-const colors = {
-    primary: {
-        ...blue,
-        default: blue['500'],
-    },
-    secondary: {
-        ...navy,
-        default: navy['900'],
-    },
-    gray: {
-        ...gray,
-        light: gray['50'],
-        medium: gray['200'],
-        dark: gray['600'],
-    },
-    red: {
-        ...red,
-        default: red['700'],
-    },
-    green: {
-        ...green,
-        default: green['700'],
-    },
-    yellow: {
-        ...yellow,
-        default: yellow['400'],
-    },
-    success: green['700'],
-    warning: yellow['400'],
-    error: red['700'],
-    accent: gray['200'],
-    text: {
-        primary: {
-            light: black,
-            dark: white,
-        },
-        secondary: {
-            light: gray['600'],
-        },
-        link: {
-            light: blue['500'],
-            dark: white,
-        },
-    },
-    background: {
-        gray: gray['50'],
-        white,
-    },
-    white,
-    black,
-    brandBlue,
-};
-
-export default colors;

package/styles/v2/theme/base/index.js

@@ -1,5 +0,0 @@
-export {default as sizes} from './sizes';
-export {default as colors} from './colors';
-export {default as zIndices} from './zindices';
-export {default as breakpoints} from './breakpoints';
-export {fonts, fontSizes, fontWeights} from './typography';

package/styles/v2/theme/base/sizes.js

@@ -1,48 +0,0 @@
-const container = {
-    base: '100%', // 640px
-    tablet: '45rem', // 720px
-    desktop: '72rem', // 1152px
-};
-
-const sizes = {
-    container,
-    0: '0',
-    0.5: '0.125rem', // 2px
-    1: '0.25rem', // 4px
-    1.5: '0.375rem', // 6px
-    2: '0.5rem', // 8px
-    2.5: '0.625rem', // 10px
-    3: '0.75rem', // 12px
-    3.5: '0.875rem', // 14px
-    4: '1rem', // 16px
-    5: '1.25rem', // 20px
-    6: '1.5rem', // 24px
-    7: '1.75rem', // 28px
-    8: '2rem', // 32px
-    9: '2.25rem', // 36px
-    10: '2.5rem', // 40px
-    12: '3rem', // 48px
-    14: '3.5rem', // 56px
-    16: '4rem', // 64px
-    20: '5rem', // 80px
-    24: '6rem', // 96px
-    28: '7rem', // 112px
-    32: '8rem', // 128px
-    36: '9rem', // 144px
-    40: '10rem', // 160px
-    44: '11rem', // 176px
-    48: '12rem', // 192px
-    52: '13rem', // 208px
-    56: '14rem', // 224px
-    60: '15rem', // 240px
-    64: '16rem', // 256px
-    72: '18rem', // 272px
-    80: '20rem', // 288px
-    96: '24rem', // 384px
-    px: '1px',
-    full: '100%',
-    max: 'max-content',
-    min: 'min-content',
-};
-
-export default sizes;

package/styles/v2/theme/base/typography.js

@@ -1,24 +0,0 @@
-export const fonts = {
-    heading: `"Open Sans", sans-serif`,
-    body: `"Open Sans", sans-serif`,
-};
-
-export const fontSizes = {
-    '5xl': '3.5rem', // 56px
-    '4xl': '3rem', // 48px
-    '3xl': '2.5rem', // 40px
-    '2xl': '2rem', // 32px
-    xl: '1.5rem', // 24px
-    lg: '1.25rem', // 20px
-    md: '1.125rem', // 18px
-    base: '1rem', // 16px
-    sm: '0.875rem', // 14px
-    xs: '0.75rem', // 12px
-};
-
-export const fontWeights = {
-    light: 300,
-    normal: 400,
-    semibold: 600,
-    bold: 700,
-};

package/styles/v2/theme/base/zindices.js

@@ -1,17 +0,0 @@
-const indices = {
-    hide: -100, // equivalent to $z-index-negative in fe-core (https://github.com/spothero/fe-core/blob/main/utils/_defaults.scss)
-    auto: 'auto',
-    base: 0, // equivalent to $z-index-back in fe-core
-    layer1: 100, // equivalent to $z-index-mid in fe-core
-    layer2: 200, // equivalent to $z-index-fore in fe-core
-    layer3: 300, // equivalent to $z-index-layer1 in fe-core
-    layer4: 400, // equivalent to $z-index-layer2 in fe-core
-    layer5: 500, // equivalent to $z-index-layer3 in fe-core
-    layer6: 600, // equivalent to $z-index-layer4 in fe-core
-    layer7: 700, // equivalent to $z-index-modal-shim in fe-core
-    layer8: 800, // equivalent to $z-index-modal in fe-core
-    layer9: 900, // equivalent to $z-index-notification in fe-core
-    layer10: 1000, // equivalent to $z-index-top in fe-core
-};
-
-export default indices;

package/styles/v2/theme/global.js

@@ -1,118 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import {Global} from '@emotion/react';
-import {colors, fontSizes, fontWeights} from 'v2/theme/base';
-
-const global = {
-    'html, body': {
-        color: 'text.primary.light',
-    },
-    // By default, Chakra has all svgs set to 'display: block',
-    // this breaks the layout of some older components, so now
-    // we set all svgs to 'display: inline-block;' and only set
-    // 'display: block;' on the components that need it
-    // (as of 3/9/2021 only the v1 AutoSuggestInput component
-    // needed this update)
-    svg: {
-        display: 'inline-block',
-    },
-};
-
-export default global;
-
-export const Fonts = () => (
-    <Global
-        styles={`
-            @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap');
-            /* Copied from https://fonts.googleapis.com/css2?family=Open+Sans:wght@700&display=swap */
-            /* latin-ext */
-            @font-face {
-                font-family: 'Open Sans';
-                font-style: normal;
-                font-weight: 700;
-                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN7rgOXOhpKKSTj5PW.woff2) format('woff2');
-                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-            }
-            /* latin-ext */
-            @font-face {
-                font-family: 'Open Sans';
-                font-style: normal;
-                font-weight: 600;
-                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UNirkOXOhpKKSTj5PW.woff2) format('woff2');
-                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-            }
-            /* latin-ext */
-            @font-face {
-                font-family: 'Open Sans';
-                font-style: normal;
-                font-weight: 400;
-                src: url(https://fonts.gstatic.com/s/opensans/v18/mem8YaGs126MiZpBA-UFW50bf8pkAp6a.woff2) format('woff2');
-                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-            }
-            /* latin-ext */
-            @font-face {
-                font-family: 'Open Sans';
-                font-style: normal;
-                font-weight: 300;
-                src: url(https://fonts.gstatic.com/s/opensans/v18/mem5YaGs126MiZpBA-UN_r8OXOhpKKSTj5PW.woff2) format('woff2');
-                unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
-            }
-        `}
-    />
-);
-
-export const LegacyOverrides = ({useLegacyOverrides}) =>
-    useLegacyOverrides ? (
-        <Global
-            styles={`
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            margin-top: 0;
-            font-weight: ${fontWeights.semibold};
-        }
-
-        .heading-sm {
-            font-size: ${fontSizes.base};
-        }
-        .heading-md {
-            font-size: ${fontSizes.md};
-        }
-        .heading-lg {
-            font-size: ${fontSizes['5xl']};
-        }
-
-        p {
-            line-height: 1.5;
-        }
-
-        a {
-            outline: none;
-            text-align: left;
-            color: ${colors.primary.default};
-            text-decoration: none;
-
-            &:active,
-            &:focus {
-                outline: none;
-            }
-
-            &:hover {
-                color: ${colors.primary['700']};
-            }
-        }
-
-        small {
-            font-size: ${fontSizes.xs};
-        }
-
-        `}
-        />
-    ) : null;
-LegacyOverrides.propTypes = {
-    /** If true, this will use the old `spothero-html` base styles */
-    useLegacyOverrides: PropTypes.bool,
-};

package/styles/v2/theme/index.js

@@ -1,27 +0,0 @@
-import global from './global';
-import * as base from './base';
-// import merge from 'lodash/merge';
-import {extendTheme} from '@chakra-ui/react';
-import chakraDefaultTheme from '@chakra-ui/theme';
-
-import * as components from 'v2/components/styles';
-
-// use this to extend the base theme of chakra, this adds on top of what is defined in baseConfig
-const extendedTheme = {
-    initialColorMode: 'light',
-    useSystemColorMode: false,
-    styles: {
-        global,
-    },
-    remToPixels: (rem, baseSize = 16) =>
-        !rem ? 0 : `${baseSize * Number(rem.replace('rem', ''))}`,
-};
-
-// use this to override base themes from Chakra
-const baseConfig = {
-    ...chakraDefaultTheme,
-    ...base,
-    components,
-};
-
-export default extendTheme(extendedTheme, baseConfig);

package/styles/v2/utils/Spaces.js

@@ -1,16 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-
-const Spaces = ({spaces = 3}) => (
-    <span
-        dangerouslySetInnerHTML={{
-            __html: Array(spaces).fill('&nbsp;').join(''),
-        }}
-    />
-);
-
-Spaces.propTypes = {
-    spaces: PropTypes.number,
-};
-
-export default Spaces;

package/v1/assets-manifest.json

@@ -1,5 +0,0 @@
-{
-  "index.html": "index.html",
-  "index.js.license.txt": "index.js.LICENSE.txt",
-  "main.js": "index.js"
-}

package/v1/index.html

@@ -1 +0,0 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><meta http-equiv="x-ua-compatible" content="ie=edge"><meta name="viewport" content="width=device-width,initial-scale=1"><script defer="defer" src="/index.js"></script></head><body><div id="root"></div></body></html>