refactor: initial migration

microlinkhq · Jan 28, 2024 · 838e9b5 · 838e9b5
1 parent 8d50d6d
commit 838e9b5
Show file tree

Hide file tree

Showing 10 changed files with 62 additions and 218 deletions.
diff --git a/package.json b/package.json
@@ -109,6 +109,7 @@
     "@stripe/react-stripe-js": "~2.4.0",
     "@stripe/stripe-js": "~2.2.2",
     "@styled-system/prop-types": "~5.1.5",
+    "@techstack/styled-system": "~1.0.341",
     "@tippyjs/react": "~4.2.6",
     "@vercel/analytics": "~1.1.1",
     "beauty-error": "~1.2.18",
@@ -152,7 +153,7 @@
     "react-twitter-widgets": "~1.11.0",
     "remark-slug": "~7.0.1",
     "sass": "~1.69.6",
-    "styled-components": "5",
+    "styled-components": "~6.1.6",
     "styled-is": "~1.3.0",
     "styled-system": "~5.1.5",
     "swr": "~2.2.4",

diff --git a/src/components/elements/Box.js b/src/components/elements/Box.js
@@ -1,63 +1,21 @@
 import {
-  compose,
-  space,
   color,
-  borders,
-  lineHeight,
-  width,
-  flex,
-  order,
-  alignSelf,
-  position,
-  fontSize,
+  space,
   variant,
-  textAlign,
-  maxWidth,
-  boxShadow,
-  display,
-  height
-} from 'styled-system'
+  border,
+  position,
+  layout
+} from '@techstack/styled-system'
 
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 const Box = styled('div')(
-  compose(
-    space,
-    textAlign,
-    maxWidth,
-    boxShadow,
-    display,
-    borders,
-    lineHeight,
-    height,
-    width,
-    fontSize,
-    color,
-    flex,
-    order,
-    alignSelf,
-    position,
-    variant({ key: 'boxStyles' })
-  )
+  border,
+  color,
+  layout,
+  position,
+  space,
+  variant({ key: 'button' })
 )
 
-Box.propTypes = {
-  ...propTypes.space,
-  ...propTypes.textAlign,
-  ...propTypes.maxWidth,
-  ...propTypes.boxShadow,
-  ...propTypes.border,
-  ...propTypes.display,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.fontSize,
-  ...propTypes.color,
-  ...propTypes.flex,
-  ...propTypes.order,
-  ...propTypes.alignSelf,
-  ...propTypes.position,
-  ...propTypes.lineHeight
-}
-
 export default Box
diff --git a/src/components/elements/Button/ButtonBase.js b/src/components/elements/Button/ButtonBase.js
@@ -1,37 +1,27 @@
-import { compose, borders, buttonStyle } from 'styled-system'
-import propTypes from '@styled-system/prop-types'
-import { transition } from 'theme'
 import styled from 'styled-components'
+import { transition } from 'theme'
 import Text from '../Text'
 
-const Button = styled(Text)(
-  {
-    transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
-    appearance: 'none',
-    display: 'inline-block',
-    textAlign: 'center',
-    lineHeight: 16 / 14,
-    textDecoration: 'none',
-    verticalAlign: 'middle',
-    WebkitFontSmoothing: 'antialiased',
-    whiteSpace: 'nowrap',
-    outline: 0,
-    '&:hover': {
-      cursor: 'pointer'
-    }
-  },
-  compose(borders, buttonStyle)
-)
-
-Button.propTypes = {
-  ...propTypes.Text,
-  ...propTypes.border
-}
+const Button = styled(Text)({
+  transition: `background-color ${transition.medium}, color ${transition.medium}, box-shadow ${transition.medium}`,
+  appearance: 'none',
+  display: 'inline-block',
+  textAlign: 'center',
+  lineHeight: 16 / 14,
+  textDecoration: 'none',
+  verticalAlign: 'middle',
+  WebkitFontSmoothing: 'antialiased',
+  whiteSpace: 'nowrap',
+  outline: 0,
+  '&:hover': {
+    cursor: 'pointer'
+  }
+})
 
 Button.defaultProps = {
   as: 'button',
   fontFamily: 'sans',
-  fontSize: '1',
+  fontSize: 1,
   fontWeight: 'bold',
   px: 3,
   py: 2,

diff --git a/src/components/elements/Caps.js b/src/components/elements/Caps.js
@@ -1,16 +1,11 @@
 import styled from 'styled-components'
-import { letterSpacing } from 'styled-system'
 
 import Text from './Text'
 
-const Caps = styled(Text)(
-  {
-    textTransform: 'uppercase'
-  },
-  letterSpacing
-)
+const Caps = styled(Text)``
 
 Caps.defaultProps = {
+  textTransform: 'uppercase',
   fontSize: 1,
   letterSpacing: 2
 }

diff --git a/src/components/elements/Flex.js b/src/components/elements/Flex.js
@@ -1,40 +1,14 @@
-import {
-  compose,
-  flexWrap,
-  flexDirection,
-  alignItems,
-  justifyContent,
-  alignContent,
-  display
-} from 'styled-system'
+import { flexbox } from '@techstack/styled-system'
 
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 import Box from './Box'
 
 const Flex = styled(Box)(
   {
     display: 'flex'
   },
-  compose(
-    display,
-    alignContent,
-    alignItems,
-    flexDirection,
-    flexWrap,
-    justifyContent
-  )
+  flexbox
 )
 
-Flex.propTypes = {
-  ...Box.propTypes,
-  ...propTypes.alignContent,
-  ...propTypes.alignItems,
-  ...propTypes.flexDirection,
-  ...propTypes.flexWrap,
-  ...propTypes.justifyContent,
-  ...propTypes.display
-}
-
 export default Flex
diff --git a/src/components/elements/Image/Image.js b/src/components/elements/Image/Image.js
@@ -1,47 +1,26 @@
-import propTypes from '@styled-system/prop-types'
 import styled from 'styled-components'
 import { withLazy } from 'helpers/hoc'
 
 import {
-  compose,
   space,
   color,
-  maxWidth,
-  width,
-  height,
-  display,
-  textAlign,
-  borderRadius
-} from 'styled-system'
+  layout,
+  typography,
+  border
+} from '@techstack/styled-system'
 
 const Image = styled('img')(
   {
     display: 'block',
     maxWidth: '100%'
   },
-  compose(
-    space,
-    color,
-    width,
-    height,
-    maxWidth,
-    display,
-    textAlign,
-    borderRadius
-  )
+  space,
+  color,
+  layout,
+  typography,
+  border
 )
 
-Image.propTypes = {
-  ...propTypes.space,
-  ...propTypes.color,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.maxWidth,
-  ...propTypes.display,
-  ...propTypes.textAlign,
-  ...propTypes.borderRadius
-}
-
 Image.defaultProps = {
   decoding: 'async',
   loading: 'lazy'

diff --git a/src/components/elements/Svg.js b/src/components/elements/Svg.js
@@ -1,31 +1,15 @@
-import { compose, color, space, height, width, style } from 'styled-system'
-import propTypes from '@styled-system/prop-types'
+import { compose, color, space, layout, system } from '@techstack/styled-system'
 import styled from 'styled-components'
 
-const transform = style({
+const transform = system({
   prop: 'transform',
   cssProperty: 'transform'
 })
 
-const Svg = styled('svg')(
-  compose(
-    color,
-    space,
-    height,
-    width,
-    transform
-  )
-)
+const Svg = styled('svg')(color, space, layout, transform)
 
 Svg.defaultProps = {
   fill: 'currentColor'
 }
 
-Svg.propTypes = {
-  ...propTypes.space,
-  ...propTypes.width,
-  ...propTypes.height,
-  ...propTypes.color
-}
-
 export default Svg
diff --git a/src/components/elements/Text.js b/src/components/elements/Text.js
@@ -1,26 +1,9 @@
-import {
-  compose,
-  variant,
-  fontFamily,
-  fontWeight,
-  letterSpacing
-} from 'styled-system'
-
+import { variant, typography } from '@techstack/styled-system'
 import styled from 'styled-components'
-import propTypes from '@styled-system/prop-types'
 
 import Box from './Box'
 
-const Text = styled(Box)(
-  compose(fontFamily, fontWeight, letterSpacing, variant({ key: 'textStyles' }))
-)
-
-Text.propTypes = {
-  ...Box.propTypes,
-  ...propTypes.fontFamily,
-  ...propTypes.fontWeight,
-  ...propTypes.letterSpacing
-}
+const Text = styled(Box)(typography, variant({ key: 'text' }))
 
 Text.defaultProps = {
   fontWeight: 'normal',

diff --git a/src/components/patterns/Toolbar/NavLink.js b/src/components/patterns/Toolbar/NavLink.js
@@ -21,7 +21,6 @@ const style = css`
 
 const NavLink = styled(Caps)(
   {
-    bg: 'transparent',
     display: 'inline-flex',
     alignItems: 'center',
     alignSelf: 'stretch',
@@ -36,9 +35,10 @@ const NavLink = styled(Caps)(
 )
 
 NavLink.defaultProps = {
-  pl: 3,
-  fontSize: 0,
-  as: 'div'
+  // TODO: this seems like a bug
+  // https://github.com/The-Code-Monkey/styled-system/issues/640
+  fontSize: [0, 0, 0, 0],
+  pl: 3
 }
 
 export default withAnalytics(withLink(NavLink))