Replaces internal usage of utilities with hsds4 utils packages (plus Helix)

.remake/component/remake-name/remake-name.css.js

@@ -1,4 +1,4 @@
 import styled from 'styled-components'
-import { getColor } from '../../styles/utilities/color'
+import { getColor } from '@hsds/utils-color'
 
 export const <%= name %>UI = styled('div')``

docs/contributing/creating.md

@@ -67,7 +67,7 @@ Add the starting React component boilerplate for `Strong.jsx`:
 ```jsx
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
 import { StrongUI } from './Strong.css.js'
 

package.json

@@ -81,17 +81,35 @@
     "make:version": "node ./scripts/make-version.js"
   },
   "peerDependencies": {
-    "react": "^16.13.1 || ^17.0.0",
-    "react-dom": "^16.13.1 || ^17.0.0",
+    "react": "^16.14.0 || ^17.0.0",
+    "react-dom": "^16.14.0 || ^17.0.0",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",
     "styled-components": "5.1.1"
   },
   "dependencies": {
+    "@hsds/utils-animation": "4.0.0",
+    "@hsds/utils-bem": "4.0.0",
+    "@hsds/utils-clipboard": "4.0.0",
+    "@hsds/utils-color": "4.0.0",
+    "@hsds/utils-constants": "4.0.0",
+    "@hsds/utils-dom": "4.0.0",
+    "@hsds/utils-env": "4.0.0",
+    "@hsds/utils-faders": "4.0.0",
+    "@hsds/utils-focus": "4.0.0",
+    "@hsds/utils-fonts": "4.0.0",
+    "@hsds/utils-id": "4.0.0",
+    "@hsds/utils-keyboard": "4.0.0",
+    "@hsds/utils-mixins": "4.0.0",
+    "@hsds/utils-number": "4.0.0",
+    "@hsds/utils-react": "4.0.0",
+    "@hsds/utils-sass": "4.0.0",
+    "@hsds/utils-scroll": "4.0.0",
+    "@hsds/utils-shadow": "4.0.0",
+    "@hsds/utils-strings": "4.0.0",
     "@datepicker-react/hooks": "^2.7.0",
     "@helpscout/hsds-illos": "1.9.0",
     "@helpscout/motion": "0.0.8",
-    "@helpscout/react-utils": "^2.4.0",
     "@helpscout/wedux": "0.0.11",
     "@juggle/resize-observer": "^3.3.1",
     "@tippyjs/react": "4.2.6",
@@ -134,7 +152,7 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@helpscout/colorway": "0.10.0",
-    "@helpscout/helix": "0.2.0",
+    "@hsds/helix": "4.0.0",
     "@helpscout/prestart": "^0.0.9",
     "@storybook/addon-a11y": "6.3.12",
     "@storybook/addon-actions": "6.3.12",
@@ -189,8 +207,8 @@
     "pretty-quick": "^2.0.1",
     "prop-types": "^15.7.2",
     "re-resizable": "^6.9.0",
-    "react": "16.13.1",
-    "react-dom": "16.13.1",
+    "react": "16.14.0",
+    "react-dom": "16.14.0",
     "react-hotkeys-hook": "^3.4.4",
     "react-router": "^5.2.0",
     "react-router-dom": "^5.2.0",

src/adapters/__tests__/adapters.app.test.js

@@ -7,7 +7,7 @@ import {
   svgSet as illoSet,
   unload as unloadIllos,
 } from '../../components/Illo/Illo.utils'
-import { getComponentName } from '../../utilities/component'
+import { getComponentName } from '@hsds/utils-react'
 
 afterEach(() => {
   unloadIcons()

src/adapters/__tests__/adapters.embed.test.js

@@ -7,7 +7,7 @@ import {
   svgSet as illoSet,
   unload as unloadIllos,
 } from '../../components/Illo/Illo.utils'
-import { getComponentName } from '../../utilities/component'
+import { getComponentName } from '@hsds/utils-react'
 
 afterEach(() => {
   unloadIcons()

src/components/Accordion/Accordion.Body.jsx

@@ -1,6 +1,6 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import Collapsible from '../Collapsible'
 import classNames from 'classnames'
 import { BodyUI } from './Accordion.css'

src/components/Accordion/Accordion.Section.jsx

@@ -1,10 +1,10 @@
 import React, { createContext, useContext, useState } from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
 import { SectionUI } from './Accordion.css'
 import { AccordionContext } from './Accordion'
-import { createUniqueIDFactory } from '../../utilities/id'
+import { createUniqueIDFactory } from '@hsds/utils-id'
 
 const nextUuid = createUniqueIDFactory('AccordionSection')
 

src/components/Accordion/Accordion.Title.jsx

@@ -1,10 +1,10 @@
 import React, { useContext } from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import Flexy from '../Flexy'
 import Link from '../Link'
 import Icon from '../Icon'
-import Keys from '../../constants/Keys'
+import { Keys } from '@hsds/utils-keyboard'
 import classNames from 'classnames'
 import { BadgeUI, TitleContentUI, TitleUI } from './Accordion.css'
 import { SectionContext } from './Accordion.Section'

src/components/Accordion/Accordion.css.js

@@ -2,11 +2,11 @@ import styled from 'styled-components'
 import Badge from '../Badge'
 import Flexy from '../Flexy'
 import Text from '../Text'
-import { breakpoint } from '../../styles/mixins/breakpoints.css'
-import { getColor } from '../../styles/utilities/color'
+import { generateBreakPoint } from '@hsds/utils-mixins'
+import { getColor } from '@hsds/utils-color'
 import { pageBreakpointsConfig } from '../Page/Page.config'
 import { classNameStrings as titleClassNames } from './Accordion.Title'
-import { setFontSize } from '../../styles/utilities/font'
+import { setFontSize } from '@hsds/utils-fonts'
 
 export const AccordionUI = styled('div')`
   border: 1px solid ${getColor('grey.400')};
@@ -30,7 +30,7 @@ export const AccordionUI = styled('div')`
     margin-left: -50px;
     margin-right: -50px;
 
-    ${breakpoint(
+    ${generateBreakPoint(
       pageBreakpointsConfig.breakpoint.widescreen,
       `
       margin-left: -100px;
@@ -109,7 +109,7 @@ export const BodyUI = styled('div')`
     padding-left: 50px;
     padding-right: 50px;
 
-    ${breakpoint(
+    ${generateBreakPoint(
       pageBreakpointsConfig.breakpoint.widescreen,
       `
       padding-left: 100px;
@@ -243,7 +243,7 @@ export const TitleUI = styled('div')`
     padding-left: 50px;
     padding-right: 50px;
 
-    ${breakpoint(
+    ${generateBreakPoint(
       pageBreakpointsConfig.breakpoint.widescreen,
       `
     padding-left: 100px;
@@ -264,7 +264,10 @@ export const TitleUI = styled('div')`
     &.is-page .drag-handle {
       left: 14px;
 
-      ${breakpoint(pageBreakpointsConfig.breakpoint.widescreen, `left: 39px;`)};
+      ${generateBreakPoint(
+        pageBreakpointsConfig.breakpoint.widescreen,
+        `left: 39px;`
+      )};
     }
 
     .drag-handle {

src/components/Accordion/Accordion.jsx

@@ -1,6 +1,6 @@
 import React, { createContext, useState, useContext } from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import AccordionBody from './Accordion.Body'
 import AccordionHeading from './Accordion.Heading'
 import AccordionLink from './Accordion.Link'

src/components/Accordion/Accordion.storiesHelpers.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Accordion, Button, Input, Text } from '../index'
 import { boolean, number } from '@storybook/addon-knobs'
-import { faker } from '@helpscout/helix'
+import { faker } from '@hsds/helix'
 
 const body = faker.lorem.paragraph()()
 const form = (

src/components/ActionSelect/ActionSelect.ContentResizer.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import Animate from '../Animate'
 import { ContentUI, ContentResizerUI } from './ActionSelect.css'
-import { getEasingTiming } from '../../utilities/easing'
+import { getEasingTiming } from '@hsds/utils-animation'
 
 function noop() {}
 

src/components/ActionSelect/ActionSelect.css.js

@@ -1,5 +1,5 @@
 import styled from 'styled-components'
-import { getColor } from '../../styles/utilities/color'
+import { getColor } from '@hsds/utils-color'
 
 export const config = {
   backgroundColor: getColor('grey.200'),

src/components/ActionSelect/ActionSelect.jsx

@@ -5,8 +5,8 @@ import isNil from 'lodash.isnil'
 import DropList from '../DropList'
 import { SelectTag } from '../DropList/DropList.togglers'
 import ContentResizer from './ActionSelect.ContentResizer'
-import { findFirstFocusableNode } from '../../utilities/focus'
-import { smoothScrollTo, linear } from '../../utilities/smoothScroll'
+import { findFirstFocusableNode } from '@hsds/utils-focus'
+import { smoothScrollTo, linear } from '@hsds/utils-scroll'
 import { ActionSelectUI } from './ActionSelect.css'
 
 export class ActionSelect extends React.PureComponent {

src/components/Alert/Alert.css.js

@@ -1,7 +1,7 @@
 import styled from 'styled-components'
-import { STATUSES } from '../../styles/configs/constants'
-import { getColor } from '../../styles/utilities/color'
-import forEach from '../../styles/utilities/forEach'
+import { STATUSES } from '@hsds/utils-constants'
+import { getColor } from '@hsds/utils-color'
+import { forEach } from '@hsds/utils-sass'
 
 export const config = {
   backgroundColor: getColor('state.warning.backgroundColor'),

src/components/Alert/Alert.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
 import Badge from '../Badge'
 import Animate from '../Animate'

src/components/Animate/Animate.jsx

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types'
 import classNames from 'classnames'
 import { Transition } from 'react-transition-group'
 import { getSequenceNames } from './Animate.utils'
-import { getEasingTiming } from '../../utilities/easing'
+import { getEasingTiming } from '@hsds/utils-animation'
 import { AnimateUI } from './Animate.css'
 import { AnimateGroupContext } from '../AnimateGroup/AnimateGroup'
 

src/components/AnimateGroup/AnimateGroup.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 import { TransitionGroup } from 'react-transition-group'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
-import { getComponentKey } from '../../utilities/component'
+import { getComponentKey } from '@hsds/utils-react'
 
 export const AnimateGroupContext = React.createContext({})
 

src/components/ArticleCard/ArticleCard.css.js

@@ -1,6 +1,6 @@
 import styled from 'styled-components'
-import { getColor } from '../../styles/utilities/color'
-import { d400, d400Effect } from '../../styles/mixins/depth.css'
+import { getColor } from '@hsds/utils-color'
+import { d400, d400Effect } from '@hsds/utils-mixins'
 import Card from '../Card'
 
 export const MetaHeaderUI = styled('header')`

src/components/ArticleCard/ArticleCard.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import Text from '../Text'
 import Truncate from '../Truncate'
 import classNames from 'classnames'

src/components/ArticleCard/ArticleCard.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks'
 import { boolean, text } from '@storybook/addon-knobs'
-import { createSpec, faker } from '@helpscout/helix'
+import { createSpec, faker } from '@hsds/helix'
 import AvatarSpec from '../../utilities/specs/avatarList.specs'
 import ArticleCard from './'
 import { Flexy, Text, Icon, StatusBadge, Avatar, AvatarList } from '../index'

src/components/Attachment/Attachment.css.js

@@ -1,9 +1,12 @@
 import styled from 'styled-components'
-import { BEM } from '../../utilities/classNames'
-import cardStyles from '../../styles/mixins/cardStyles.css'
-import { d400, d400Effect } from '../../styles/mixins/depth.css'
-import linkStyles from '../../styles/mixins/linkStyles.css'
-import { getColor } from '../../styles/utilities/color'
+import { BEM } from '@hsds/utils-bem'
+import {
+  generateCardStyles,
+  generateLinkStyles,
+  d400,
+  d400Effect,
+} from '@hsds/utils-mixins'
+import { getColor } from '@hsds/utils-color'
 
 const bem = BEM('.c-Attachment')
 
@@ -34,7 +37,7 @@ export const ErrorBorderUI = styled('div')`
 `
 
 export const AttachmentUI = styled.a`
-  ${linkStyles()};
+  ${generateLinkStyles()};
 
   background-color: white;
   border: 1px solid ${getColor('grey.500')};
@@ -114,7 +117,7 @@ export const AttachmentUI = styled.a`
   }
 
   ${bem.element('closeButton')} {
-    ${cardStyles()};
+    ${generateCardStyles()};
     display: block;
     border-radius: 9999px !important;
     position: absolute;

src/components/Attachment/Attachment.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import AttachmentProvider from './Attachment.Provider'
 import CloseButton from '../CloseButton'
 import Image from '../Image'

src/components/AttachmentList/AttachmentList.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import Attachment from '../Attachment'
 import Icon from '../Icon'
 import Inline from '../Inline'

src/components/Avatar/Avatar.Crop.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
 import { CropUI } from './Avatar.css'
 

src/components/Avatar/Avatar.Image.jsx

@@ -7,7 +7,7 @@
 import React from 'react'
 import { PropTypes } from 'prop-types'
 import classNames from 'classnames'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import VisuallyHidden from '../VisuallyHidden'
 import { ImageWrapperUI, ImageUI, InitialsUI } from './Avatar.css'
 import { getAnimationProps } from './Avatar.utils'

src/components/Avatar/Avatar.css.js

@@ -1,6 +1,6 @@
-import { getColor, getThemeBrandProp } from '../../styles/utilities/color'
-import forEach from '../../styles/utilities/forEach'
-import variableFontSize from '../../styles/utilities/variableFontSize'
+import { getColor, getThemeBrandProp } from '@hsds/utils-color'
+import { forEach } from '@hsds/utils-sass'
+import { variableFontSize } from '@hsds/utils-fonts'
 
 import styled from 'styled-components'
 import buttonConfig from '../Button/Button.config'

src/components/Avatar/Avatar.jsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import PropTypes from 'prop-types'
-import getValidProps from '@helpscout/react-utils/dist/getValidProps'
+import { getValidProps } from '@hsds/utils-react'
 import classNames from 'classnames'
-import { getEasingTiming } from '../../utilities/easing'
+import { getEasingTiming } from '@hsds/utils-animation'
 import Icon from '../Icon'
 import StatusDot from '../StatusDot'
 import Tooltip from '../Tooltip'

src/components/Avatar/Avatar.utils.js

@@ -1,4 +1,4 @@
-import { getEasingTiming } from '../../utilities/easing'
+import { getEasingTiming } from '@hsds/utils-animation'
 
 export const getImageSrc = props => {
   const { fallbackImage, image } = props