@spothero/ui 15.10.8 → 16.0.0-beta.0

package/.eslintignore

@@ -4,4 +4,5 @@ backlog
 styles
 dist
 **/fe-icons/**/*
-**/fe-ui/**/*
+**/fe-ui/**/*
+coverage

package/dex.config.js

@@ -8,7 +8,7 @@ module.exports = {
     },
     production: {
         client: {
-            entry: [`./src/${targetEntry}/components/index.js`],
+            entry: [`./src/components/index.js`],
             output: {
                 filename: 'index.js',
                 path: path.resolve(__dirname, targetEntry),

package/jest.config.json

@@ -22,8 +22,7 @@
         "@testing-library/jest-dom/extend-expect"
     ],
     "testMatch": [
-        "**/?(*)/v{1,2}/**/?(*)+(spec|test).js?(x)",
-        "**/?(*)+(spec|test).jsx"
+        "**/?(*)+(spec|test).js?(x)"
     ],
     "watchPlugins": [
         "jest-watch-typeahead/filename",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spothero/ui",
-  "version": "15.10.8",
+  "version": "16.0.0-beta.0",
   "description": "SpotHero's React component UI library.",
   "main": "v2/index.js",
   "repository": "https://github.com/spothero/fe-monorepo",
@@ -13,8 +13,9 @@
         "module-resolver",
         {
           "alias": {
-            "v1": "./src/v1",
-            "v2": "./src/v2"
+            "components": "./src/components",
+            "theme": "./src/theme",
+            "utils": "./src/utils"
           }
         }
       ]
@@ -49,22 +50,20 @@
     ]
   },
   "scripts": {
-    "clean": "rm -rf docs v1 v2 backlog lib styles || true",
+    "clean": "rm -rf docs v2 lib styles || true",
     "lint": "eslint .storybook src --ext .jsx,.js",
     "start": "start-storybook -p 6006",
     "start:ci": "http-server ./docs --port 8000 --silent",
     "cy:run": "cypress run",
     "cy:open": "cypress open",
     "pretest": "npm run build:storybook",
-    "test": "start-server-and-test start:ci http://localhost:8000 cy:run",
+    "test": "npm run test:unit",
     "test:template": "NODE_ENV=test jest --config ./jest.config.json",
     "test:unit": "npm run test:template -- --coverage",
     "test:unit:watch": "DEBUG_PRINT_LIMIT=-1 npm run test:template -- --watch",
     "clone:styles": "rsync -a src/ styles && rm -rf styles/**/*.{js,jsx} styles/**/stories",
-    "build:v1": "TARGET_ENTRY=v1 NODE_ENV=production dex",
     "build:v2": "TARGET_ENTRY=v2 NODE_ENV=production dex",
-    "build:backlog": "NODE_ENV=production babel src -d backlog --ignore \"**/*.spec.js\",\"**/stories/**\",\"**/v2/**\"",
-    "build": "npm run clean && npm run clone:styles && npm run build:backlog && npm run build:v1 && npm run build:v2",
+    "build": "npm run clean && npm run clone:styles && npm run build:v2",
     "build:storybook": "build-storybook -o ./docs",
     "release": "npm-release",
     "publish-storybook": "npm run build:storybook && push-dir --dir=docs --branch=gh-pages --allow-unclean"
@@ -131,28 +130,13 @@
     "@chakra-ui/theme-tools": "1.3.6",
     "@emotion/react": "11.1.5",
     "@emotion/styled": "11.1.5",
-    "@spothero/utils": "*",
     "@storybook/addon-a11y": "6.5.10",
-    "axe-core": "4.1.3",
-    "chartist": "0.11.4",
-    "chartist-plugin-legend": "0.6.2",
-    "chartist-plugin-tooltips": "0.0.17",
     "core-js": "3.6.5",
-    "embla-carousel-react": "5.0.1",
-    "form-serialize": "0.7.2",
     "framer-motion": "4.1.17",
-    "react-collapse": "4.0.3",
-    "react-day-picker": "7.3.2",
-    "react-input-mask": "2.0.4",
-    "react-lazy-load": "3.0.13",
-    "react-motion": "0.5.2",
     "react-select": "5.4.0",
-    "react-tether": "2.0.4",
     "regenerator-runtime": "0.13.7",
-    "scrollingelement": "1.5.2",
     "ssr-window": "1.0.1",
-    "transitionEnd": "1.0.2",
-    "uuid": "3.3.3"
+    "transitionEnd": "1.0.2"
   },
   "peerDependencies": {
     "classnames": "^2.2.6",

package/styles/{v2/components → components}/Accordion/Accordion.stories.js

@@ -2,8 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {Box} from '@chakra-ui/react';
 
-import Text from 'v2/components/Text/Text';
-import Heading from 'v2/components/Heading/Heading';
+import Text from 'components/Text/Text';
+import Heading from 'components/Heading/Heading';
 
 import Component from './Accordion';
 import {

package/styles/{v2/components → components}/Accordion/styles/button.js

@@ -1,4 +1,4 @@
-import {variants as headingVariants} from 'v2/components/Heading/Heading.styles';
+import {variants as headingVariants} from 'components/Heading/Heading.styles';
 
 const button = {
     fontSize: headingVariants.h4.fontSize,

package/styles/{v2/components → components}/Alert/Alert.jsx

@@ -12,8 +12,8 @@ import IconX from '@spothero/icons/times';
 import IconInfo from '@spothero/icons/filled-info-circle';
 import IconExclamation from '@spothero/icons/filled-exclamation-circle';
 import IconCheck from '@spothero/icons/filled-check-circle';
-import Button from 'v2/components/Button/Button';
-import Icon from 'v2/components/Icon/Icon';
+import Button from 'components/Button/Button';
+import Icon from 'components/Icon/Icon';
 
 export const STATUSES = {
     NEUTRAL: 'neutral',

package/styles/{v2/components → components}/AutoSuggestSelect/AutoSuggestSelect.jsx

@@ -182,6 +182,13 @@ AutoSuggestSelect.propTypes = {
     onChange: PropTypes.func.isRequired,
     /** Optional src to SVG to use as search icon */
     iconSrc: PropTypes.string,
+
+    // This prop is added to work around error: 'innerRef' is missing in props validation react/prop-types
+    // eslint-disable-next-line react/no-unused-prop-types
+    innerRef: PropTypes.object,
+    // This prop is added to work around error: 'innerProps' is missing in props validation react/prop-types
+    // eslint-disable-next-line react/no-unused-prop-types
+    innerProps: PropTypes.object,
 };
 
 export default AutoSuggestSelect;

package/styles/{v2/components → components}/Button/stories/button.js

@@ -4,7 +4,7 @@ import {Box, Text} from '@chakra-ui/react';
 import IconCheck from '@spothero/icons/check';
 
 import Component from '../Button';
-import ButtonProps from 'v2/components/Button/button-props';
+import ButtonProps from 'components/Button/button-props';
 
 const ButtonTemplate = (props, {hasDarkBackground}) => {
     const variant = `${props.variant}${hasDarkBackground ? 'OnDark' : ''}`;

package/styles/{v2/components → components}/Button/stories/overview.js

@@ -6,7 +6,7 @@ import IconCheck from '@spothero/icons/check';
 
 import Component from '../Button';
 import {variants} from '../Button.styles';
-import Text from 'v2/components/Text/Text';
+import Text from 'components/Text/Text';
 
 const variationsArray = ({baseVariantName, hasDarkBackground}) => {
     const variant = `${baseVariantName}${hasDarkBackground ? 'OnDark' : ''}`;

package/styles/{v2/components → components}/FormControl/FormControl.jsx

@@ -72,6 +72,8 @@ FormControl.propTypes = {
     errorMessage: PropTypes.string,
     children: PropTypes.element,
     isFieldset: PropTypes.bool,
+    isOptional: PropTypes.bool,
+    isRequired: PropTypes.bool,
 };
 
 export default FormControl;

package/styles/{v2/components → components}/Grid/Grid.stories.js

@@ -4,7 +4,7 @@ import {Box} from '@chakra-ui/react';
 
 import GridComponent from './Grid';
 
-import {GridItem as GridItemComponent, Container} from 'v2/components';
+import {GridItem as GridItemComponent, Container} from 'components';
 
 const rangeControl = (max, min = 1) => ({
     control: {

package/styles/{v2/components → components}/Heading/Heading.styles.js

@@ -1,4 +1,4 @@
-import {fontSizes, fontWeights} from 'v2/theme/base/typography';
+import {fontSizes, fontWeights} from 'theme/base/typography';
 
 const baseStyle = {
     lineHeight: 1.5,

package/styles/{v2/components → components}/Image/Image.jsx

@@ -1,8 +1,29 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import {Image as ChakraImage, Img as ChakraImg} from '@chakra-ui/react';
-import EnvironmentUtils from '@spothero/utils/environment';
 import template from 'lodash/template';
+import {window as ssrWindow} from 'ssr-window';
+
+/**
+ * Determines whether the display has a high density.
+ * @static
+ * @function isHighDensityDisplay
+ * @example
+ * EnvironmentUtils.isHighDensityDisplay();
+ * @returns {Boolean} - Whether the display is high density.
+ */
+export const isHighDensityDisplay = () => {
+    return (
+        (ssrWindow.matchMedia &&
+            (ssrWindow.matchMedia(
+                'only screen and (min-resolution: 124dpi), only screen and (min-resolution: 1.3dppx), only screen and (min-resolution: 48.8dpcm)'
+            ).matches ||
+                ssrWindow.matchMedia(
+                    'only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 2.6/2), only screen and (min--moz-device-pixel-ratio: 1.3), only screen and (min-device-pixel-ratio: 1.3)'
+                ).matches)) ||
+        (ssrWindow.devicePixelRatio && ssrWindow.devicePixelRatio > 1.3)
+    );
+};
 
 const buildCloudinarySrc = ({
     cloudinaryImageId,
@@ -13,7 +34,7 @@ const buildCloudinarySrc = ({
     quality,
 }) => {
     const defaultTemplate = `https://res.cloudinary.com/${cloudinaryCloudName}/image/upload/$w_{{WIDTH}},$h_{{HEIGHT}},$q_{{QUALITY}}/c_fill,f_auto,fl_progressive,dpr_${
-        EnvironmentUtils.isHighDensityDisplay() ? 2 : 1
+        isHighDensityDisplay() ? 2 : 1
     },h_$h,q_$q,w_$w/${cloudinaryImageId}`;
     const tmpl = cloudinaryTemplate ? cloudinaryTemplate : defaultTemplate;
 

package/styles/{v2/components → components}/Link/Link.stories.js

@@ -3,8 +3,8 @@ import React from 'react';
 import {Box} from '@chakra-ui/react';
 import ShareIcon from '@spothero/icons/share';
 
-import Text from 'v2/components/Text/Text';
-import Component from 'v2/components/Link/Link';
+import Text from 'components/Text/Text';
+import Component from 'components/Link/Link';
 
 export default {
     title: 'v2/Link',

package/styles/{v2/components → components}/List/List.stories.js

@@ -5,8 +5,8 @@ import {build, fake} from '@jackfranklin/test-data-bot';
 import Component from './List';
 
 import {ListItem} from './index';
-import Spaces from 'v2/utils/Spaces';
-import Text from 'v2/components/Text/Text';
+import Spaces from 'utils/Spaces';
+import Text from 'components/Text/Text';
 
 import disableArgs from 'storybook/utils/disable-args';
 

package/styles/{v2/components → components}/Modal/Modal.jsx

@@ -8,7 +8,6 @@ import {
     ModalFooter,
     ModalBody,
     ModalCloseButton,
-    useBreakpointValue,
     Box,
 } from '@chakra-ui/react';
 import headerStyles from './styles/header';

package/styles/{v2/components → components}/Modal/Modal.stories.js

@@ -5,15 +5,15 @@ import disableArgs from 'storybook/utils/disable-args';
 import {createSelectControl} from 'storybook/utils/create-control';
 
 import {Modal} from './index';
-import Button from 'v2/components/Button/Button';
-import Text from 'v2/components/Text/Text';
-import Heading from 'v2/components/Heading/Heading';
+import Button from 'components/Button/Button';
+import Text from 'components/Text/Text';
+import Heading from 'components/Heading/Heading';
 import Accordion, {
     AccordionIcon,
     AccordionItem,
     AccordionPanel,
     AccordionButton,
-} from 'v2/components/Accordion';
+} from 'components/Accordion';
 
 export default {
     title: 'v2/Modal',

package/styles/{v2/components → components}/Popover/Popover.stories.js

@@ -7,7 +7,7 @@ import {createSelectControl} from 'storybook/utils/create-control';
 import {Popover, PopoverContent, PopoverTrigger} from './index';
 
 import {Flex} from '@chakra-ui/react';
-import Button from 'v2/components/Button/Button';
+import Button from 'components/Button/Button';
 
 export default {
     title: 'v2/Popover',

package/styles/{v2/components → components}/Popover/styles/index.js

@@ -12,7 +12,7 @@ const baseStyle = props => ({
     header,
     content: content(props),
     body: body(props),
-    popper: popper(props),
+    popper,
 });
 
 export default merge(chakraDefaultTheme.components.Popover, {

package/styles/{v2/components/Popover/styles/popper.js → components/Popover/styles/popover-content.js}

@@ -1,13 +1,16 @@
-const popperStyles = ({variant}) => ({
-    borderRadius: 4,
+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',
-    background: variant === 'dark' ? 'secondary.default' : 'white',
     borderColor: 'gray.100',
-    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
     borderWidth: '1px',
     borderStyle: 'solid',
+    '--popper-arrow-shadow-color': t => t.colors.gray['100'],
     zIndex: 'layer10',
 });
 
-export default popperStyles;
+export default popoverContentStyles;

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

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

package/styles/{v2/components → components}/Skeleton/index.js

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

package/styles/{v2/components → components}/Spinner/Spinner.stories.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import colors from 'v2/theme/base/colors';
+import colors from 'theme/base/colors';
 
 import {sizes, SIZE_MAP, thicknesses} from './Spinner.styles';
 import {

package/styles/{v2/components → components}/Table/Table.styles.js

@@ -1,4 +1,4 @@
-import {variants as headingVariants} from 'v2/components/Heading/Heading.styles';
+import {variants as headingVariants} from 'components/Heading/Heading.styles';
 
 const parts = ['table', 'thead', 'tbody', 'tr', 'th', 'td', 'caption'];
 

package/styles/{v2/components → components}/Tabs/Tabs.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import {Tabs as ChakraTabs, forwardRef} from '@chakra-ui/react';
-import combineSizeWithVariant from "./combineSizeWithVariant";
+import combineSizeWithVariant from './combineSizeWithVariant';
 
 export const SIZE_SMALL = 'small';
 export const SIZE_BODY = 'body';
@@ -10,7 +10,7 @@ export const SIZE_HEADING = 'heading';
 const sizeMapping = {
     [SIZE_SMALL]: 'sm',
     [SIZE_BODY]: 'md',
-    [SIZE_HEADING]: 'lg'
+    [SIZE_HEADING]: 'lg',
 };
 
 const Tabs = forwardRef(({size, ...props}, ref) => {
@@ -36,4 +36,3 @@ Tabs.propTypes = {
 };
 
 export default Tabs;
-

package/styles/{v2/components → components}/Tabs/combineSizeWithVariant.js

@@ -1,6 +1,6 @@
 import styles from './styles/index';
-import {fontSizes} from 'v2/theme/base/typography';
-import {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from "./Tabs";
+import {fontSizes} from 'theme/base/typography';
+import {SIZE_BODY, SIZE_HEADING, SIZE_SMALL} from './Tabs';
 
 /**
  * ### `combineSizeWithVariant`
@@ -18,11 +18,13 @@ const combineSizeWithVariant = ({size, variant = 'line'}) => {
     const fontSizeMapping = {
         [SIZE_SMALL]: fontSizes.xs,
         [SIZE_BODY]: fontSizes.base,
-        [SIZE_HEADING]: fontSizes.lg
+        [SIZE_HEADING]: fontSizes.lg,
     };
 
     const styleProps = styles.variants[`${variant}`];
+
     styleProps.tab.fontSize = fontSizeMapping[size];
+
     return styleProps;
 };
 

package/styles/{v2/components → components}/Text/Text.styles.js

@@ -1,6 +1,6 @@
 import merge from 'lodash/merge';
 import chakraDefaultTheme from '@chakra-ui/theme';
-import {fontSizes, fontWeights} from 'v2/theme/base/typography';
+import {fontSizes, fontWeights} from 'theme/base/typography';
 
 const baseStyle = {
     lineHeight: 1.5,

package/styles/{v2/components → components}/Text/combineAsWithVariant.js

@@ -1,5 +1,5 @@
 import {variants} from './Text.styles';
-import {fontWeights} from 'v2/theme/base/typography';
+import {fontWeights} from 'theme/base/typography';
 
 // Create list of commonly used html text elements
 const asOptions = Object.freeze({

package/styles/{v2/components → components}/ThemeProvider/ThemeProvider.jsx

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React, {forwardRef} from 'react';
 import {ChakraProvider} from '@chakra-ui/react';
 
-import THEME from 'v2/theme';
-import {Fonts, LegacyOverrides} from 'v2/theme/global';
+import THEME from 'theme';
+import {Fonts, LegacyOverrides} from 'theme/global';
 import merge from 'lodash/merge';
 
 const ThemeProvider = forwardRef(

package/styles/{v2/components → components}/ThemeProvider/ThemeProvider.stories.js

@@ -2,8 +2,8 @@ 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 Spaces from 'utils/Spaces';
+import Text from 'components/Text/Text';
 import disableArgs from 'storybook/utils/disable-args';
 
 const Usage = () => {