migrate styled-system (#1679)

* refactor: remove Fixed component * refactor: initial migration * refactor: migrate header * refactor: migrate footer * refactor: rename themeCss into theme * refactor: migrate buttons * refactor: migrate storybook components * fix: footer attributes (#1709) * migrate styled-system (components & product pages) (#1712) * docs(fix): prerender auto by default * fix: toolbar * fix: `Select` story * feat: update `patterns` components * fix: `PricingTable` styles * fix: `Footer` bottom padding * feat: update `home` * fix: `home` features title text-align * feat: update `markdown` components * feat: cleanup home + Mitigate all warnings about props being passed to dom * feat: migrate `formats` page * feat: migrate `insights` page * feat: migrate `logo` page * feat: migrate `meta` page * fix: invalid bg color * feat: migrate `pdf` page * feat: migrate `screenshot` page * feat: migrate `sdk` page * build(deps): bump pnpm/action-setup from 3 to 4 (#1707) Bumps [pnpm/action-setup](https://github.com/pnpm/action-setup) from 3 to 4. - [Release notes](https://github.com/pnpm/action-setup/releases) - [Commits](pnpm/action-setup@v3...v4) --- updated-dependencies: - dependency-name: pnpm/action-setup dependency-type: direct:production update-type: version-update:semver-major ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * build: tweaks * fix: use cdn.microlink.io * build: lock react-codecopy * Update src/components/elements/Container.js * Update src/components/elements/PriceMonthly.js * refactor: mx shortcut * refactor: padding shortcut --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Kiko Beats <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * migrate styled-system (company pages) (#1713) * fix: toolbar * fix: `Select` story * feat: update `patterns` components * fix: `PricingTable` styles * fix: `Footer` bottom padding * feat: update `home` * fix: `home` features title text-align * feat: update `markdown` components * feat: cleanup home + Mitigate all warnings about props being passed to dom * feat: migrate `formats` page * feat: migrate `insights` page * feat: migrate `logo` page * feat: migrate `meta` page * fix: invalid bg color * feat: migrate `pdf` page * feat: migrate `screenshot` page * feat: migrate `sdk` page * feat: migrate `blog` listing page * feat: migrate `blog` detail page * feat: migrate `newsletter` page * feat: migrate `oss` page --------- Co-authored-by: Kiko Beats <[email protected]> * migrate styled-system (developers pages) (#1714) * fix: toolbar * fix: `Select` story * feat: update `patterns` components * fix: `PricingTable` styles * fix: `Footer` bottom padding * feat: update `home` * fix: `home` features title text-align * feat: update `markdown` components * feat: cleanup home + Mitigate all warnings about props being passed to dom * feat: migrate `formats` page * feat: migrate `insights` page * feat: migrate `logo` page * feat: migrate `meta` page * fix: invalid bg color * feat: migrate `pdf` page * feat: migrate `screenshot` page * feat: migrate `sdk` page * feat: migrate `blog` listing page * feat: migrate `blog` detail page * feat: migrate `newsletter` page * feat: migrate `oss` page * feat: migrate `changelog` page * feat: migrate `community` page * feat: migrate `recipe` pages * fix: misc. css fixes * feat: migrate `user-agents` page * feat: migrate `docs` template * fix: syntax --------- Co-authored-by: Kiko Beats <[email protected]> * migrate styled-system (other pages) (#1715) * fix: toolbar * fix: `Select` story * feat: update `patterns` components * fix: `PricingTable` styles * fix: `Footer` bottom padding * feat: update `home` * fix: `home` features title text-align * feat: update `markdown` components * feat: cleanup home + Mitigate all warnings about props being passed to dom * feat: migrate `formats` page * feat: migrate `insights` page * feat: migrate `logo` page * feat: migrate `meta` page * fix: invalid bg color * feat: migrate `pdf` page * feat: migrate `screenshot` page * feat: migrate `sdk` page * feat: migrate `blog` listing page * feat: migrate `blog` detail page * feat: migrate `newsletter` page * feat: migrate `oss` page * feat: migrate `changelog` page * feat: migrate `community` page * feat: migrate `recipe` pages * fix: misc. css fixes * feat: migrate `user-agents` page * feat: migrate `docs` template * feat: migrate `payment` pages * feat: migrate `status` page * feat: migrate `enterprise` page * fix: minor `Container` improvements * fix: use undefined instead of null --------- Co-authored-by: Kiko Beats <[email protected]> * fix: linter * refactor: remove comment * fix: detect language from title * fix: highlight lines * fix: tabs non selected style * fix: get language from props * fix: json highlight syntax * refactor: avoid defaultProps * refactor: avoid defaultProps for styled-components * refactor: remove `defaultProps` (#1717) * refactor: initial `defaultProps` removal * refactor: more `defaultProps` removals * refactor: replace code-editor related defaultProps * refactor: replace `defaultProps` on markdown components * fix: passing theme property * refactor(/formats): add DotsBackground * refactor: add announcement on logo page * chore: add tooltip type * refactor: avoid capitalize * refactor(/user-agents): better experience * fix: linter * refactor: theme prop into isDark * fix: setup body background under dark * fix: letter spacing * fix: linter * refactor: adjust aspect ratio * fix: sdk page * fix: user-agents title * chore: migrate screenshot * build: update dependencies * fix: user-agent script * fix: linter * build: update dependencies * build: update dependencies * fix: warning * refactor: don't pass down unnecessary props * fix: as → forwardedAs * fix: button spacing * fix: blog titles * refactor: adjust spaces * fix: card size * fix: css syntax * refactor: adjust max-width * chore(storybook): disable telemetry * chore: remove MQLEditor component not used * fix: linter * fix: react warnings * fix(markdown): iframe max-width * fix: linter --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: Brad Adams <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>
microlinkhq · Jul 20, 2024 · a313d80 · a313d80
1 parent 56a6b68
commit a313d80
Show file tree

Hide file tree

Showing 148 changed files with 4,553 additions and 9,636 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -5,7 +5,8 @@ module.exports = {
   addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],
   framework: '@storybook/react',
   core: {
-    builder: 'webpack5'
+    builder: 'webpack5',
+    disableTelemetry: true
   },
   webpackFinal: async config => {
     // Remove core-js to prevent issues with Storybook
@@ -29,7 +30,8 @@ module.exports = {
               // use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook
               require.resolve('babel-plugin-remove-graphql-queries'),
               // use babel-plugin-react-docgen to ensure PropTables still appear
-              require.resolve('babel-plugin-react-docgen')
+              require.resolve('babel-plugin-react-docgen'),
+              require.resolve('babel-plugin-styled-components')
             ]
           }
         }

diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,9 +1,8 @@
-import { ThemeProvider } from 'styled-components'
 import { LocationProvider } from '@gatsbyjs/reach-router'
-
+import { ThemeProvider } from 'styled-components'
 import Flex from 'components/elements/Flex'
+import themeSpec, { theme } from 'theme'
 import React from 'react'
-import theme from 'theme'
 
 import '@storybook/addon-console'
 
@@ -24,13 +23,15 @@ window.___navigate = pathname => {
 
 export const decorators = [
   Story => (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeSpec}>
       <LocationProvider>
         <Flex
-          p={3}
-          justiContent='center'
-          alignItems='baseline'
-          flexDirection='column'
+          css={theme({
+            p: 3,
+            justifyContent: 'center',
+            alignItems: 'baseline',
+            flexDirection: 'column'
+          })}
         >
           <Story />
         </Flex>

diff --git a/package.json b/package.json
@@ -102,63 +102,64 @@
   ],
   "dependencies": {
     "@kikobeats/use-query-state": "1.2.2",
-    "@microlink/mql": "~0.12.1",
-    "@microlink/react": "5.5.15",
+    "@microlink/mql": "~0.13.6",
+    "@microlink/react": "5.5.22",
     "@microlink/recipes": "~1.8.1",
     "@react-spring/web": "~9.7.3",
     "@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.480",
     "@tippyjs/react": "~4.2.6",
-    "@vercel/analytics": "~1.2.2",
+    "@vercel/analytics": "~1.3.1",
+    "babel-plugin-styled-components": "~2.1.4",
     "beauty-error": "~1.2.18",
     "cssnano": "~6.0.2",
     "cssnano-preset-advanced": "~6.0.2",
     "dlv": "~1.1.3",
-    "gatsby": "~5.13.1",
+    "gatsby": "~5.13.7",
     "gatsby-plugin-advanced-sitemap": "~2.1.0",
-    "gatsby-plugin-canonical-urls": "~5.13.0",
-    "gatsby-plugin-catch-links": "~5.13.0",
-    "gatsby-plugin-sass": "~6.13.0",
-    "gatsby-plugin-styled-components": "~6.13.0",
-    "gatsby-source-filesystem": "~5.13.0",
-    "gatsby-transformer-javascript-frontmatter": "~5.13.0",
-    "gatsby-transformer-json": "~5.13.0",
-    "gatsby-transformer-remark": "~6.13.0",
-    "gatsby-transformer-yaml": "~5.13.0",
+    "gatsby-plugin-canonical-urls": "~5.13.1",
+    "gatsby-plugin-catch-links": "~5.13.1",
+    "gatsby-plugin-sass": "~6.13.1",
+    "gatsby-plugin-styled-components": "~6.13.1",
+    "gatsby-source-filesystem": "~5.13.1",
+    "gatsby-transformer-javascript-frontmatter": "~5.13.1",
+    "gatsby-transformer-json": "~5.13.1",
+    "gatsby-transformer-remark": "~6.13.1",
+    "gatsby-transformer-yaml": "~5.13.1",
     "github-slugger": "~2.0.0",
     "humanize-url": "~3.0.0",
     "is-color": "~1.0.2",
-    "is-url-http": "~2.3.7",
+    "is-url-http": "~2.3.8",
     "json-future": "~2.2.21",
     "lodash": "~4.17.21",
     "mdx-scoped-runtime": "~0.8.0",
     "microsoft-capitalize": "~1.0.5",
     "normalize.css": "~8.0.1",
-    "palx": "~1.0.3",
     "path-browserify": "~1.0.1",
     "polished": "~4.3.1",
-    "postcss": "~8.4.32",
+    "postcss": "~8.4.39",
     "postcss-focus": "~7.0.0",
     "prepend-http": "~4.0.0",
     "prettier": "2",
     "react": "18",
-    "react-codecopy": "5.0.3",
+    "react-codecopy": "5.0.14",
     "react-confetti": "~6.1.0",
     "react-dom": "18",
     "react-feather": "~2.0.10",
     "react-syntax-highlighter": "~15.5.0",
     "react-timeago": "~7.2.0",
     "react-twitter-widgets": "~1.11.0",
     "remark-slug": "~7.0.1",
-    "sass": "~1.70.0",
-    "styled-components": "5",
+    "sass": "~1.77.8",
+    "styled-components": "~6.1.12",
     "styled-is": "~1.3.0",
     "styled-system": "~5.1.5",
-    "swr": "~2.2.4",
-    "tldts": "~6.1.1",
-    "top-crawler-agents": "~1.0.21",
-    "top-user-agents": "~2.1.12",
+    "swr": "~2.2.5",
+    "tldts": "~6.1.32",
+    "top-crawler-agents": "~1.0.27",
+    "top-user-agents": "~2.1.22",
     "unique-random-array": "~3.0.0"
   },
   "devDependencies": {
@@ -188,7 +189,8 @@
     "simple-git-hooks": "latest",
     "standard": "latest",
     "standard-markdown": "latest",
-    "standard-version": "latest"
+    "standard-version": "latest",
+    "tinyspawn": "latest"
   },
   "engines": {
     "node": ">= 18"

diff --git a/scripts/fetch-data/providers/fetch-formats.js b/scripts/fetch-data/providers/fetch-formats.js
@@ -6,9 +6,6 @@ const { sortBy } = require('lodash')
 const { getType } = require('mime')
 const path = require('path')
 
-/* We avoid cdn.microlink.io explicity since it
-  runs on top of CloudFlare and the compression
-  removes 'content-length' header */
 const MICROLINK_CDN_URL = 'https://cdn.microlink.io/file-examples'
 
 const fileUrls = async () =>

diff --git a/scripts/fetch-data/providers/fetch-user-agents.js b/scripts/fetch-data/providers/fetch-user-agents.js
@@ -0,0 +1,38 @@
+'use strict'
+
+const crawlerAgents = require('top-crawler-agents')
+const userAgents = require('top-user-agents')
+const $ = require('tinyspawn')
+const path = require('path')
+
+const pkgInfo = async pkgName => {
+  const { stdout } = await $.json(`npm view ${pkgName} --json`)
+  const version = stdout.version
+  const updatedAt = stdout.time[version]
+  return { updatedAt, version }
+}
+
+const fn = async () => {
+  const npm = await Promise.all([
+    pkgInfo('top-user-agents'),
+    pkgInfo('top-crawler-agents')
+  ])
+
+  return [
+    {
+      name: 'top-user-agents',
+      ...npm[0],
+      data: userAgents
+    },
+    {
+      name: 'top-crawler-agents',
+      ...npm[1],
+      data: crawlerAgents
+    }
+  ]
+}
+
+module.exports = () =>
+  require('../create-provider').fromCode(fn, {
+    dist: path.resolve(__dirname, '../../../data/user-agents.json')
+  })
diff --git a/src/components/elements/BackgroundSlider/BackgroundSlider.js b/src/components/elements/BackgroundSlider/BackgroundSlider.js
@@ -16,11 +16,15 @@ const SliderContainerWrapper = styled('div')`
   animation-direction: ${props => props.animationDirection};
 `
 
-const SliderContainerChildren = styled.div`
+const SliderContainerChildren = styled('div')`
   display: inline-block;
 `
 
-const BackgroundSlider = ({ animationDirection, duration, children }) => (
+const BackgroundSlider = ({
+  animationDirection = 'normal',
+  duration,
+  children
+}) => (
   <SliderContainer>
     <SliderContainerWrapper
       animationDirection={animationDirection}
@@ -32,10 +36,6 @@ const BackgroundSlider = ({ animationDirection, duration, children }) => (
   </SliderContainer>
 )
 
-BackgroundSlider.defaultProps = {
-  animationDirection: 'normal'
-}
-
 const BackgroundSliderContainer = styled(Box)`
   &:hover {
     div {

diff --git a/src/components/elements/BackgroundSlider/BackgroundSlider.stories.js b/src/components/elements/BackgroundSlider/BackgroundSlider.stories.js
@@ -1,26 +1,16 @@
-import React from 'react'
-import { Story } from 'story'
+import { Microlink } from 'components/logos'
 import { storiesOf } from '@storybook/react'
+import { theme, transition } from 'theme'
 import styled from 'styled-components'
+import range from 'lodash/range'
+import { Story } from 'story'
+import React from 'react'
+
 import {
-  Flex,
   Box,
   BackgroundSlider,
   BackgroundSliderContainer
 } from 'components/elements'
-import { transition } from 'theme'
-import range from 'lodash/range'
-import { Microlink } from 'components/logos'
-
-const NoWrap = styled(Flex)`
-  white-space: nowrap;
-  overflow: hidden;
-`
-
-NoWrap.defaultProps = {
-  justifyContent: 'center',
-  alignItems: 'center'
-}
 
 const LogoWrap = styled(Box)`
   cursor: pointer;
@@ -29,13 +19,9 @@ const LogoWrap = styled(Box)`
   &:hover {
     opacity: 0.8;
   }
+  ${theme({ px: 4, display: 'inline-block' })}
 `
 
-LogoWrap.defaultProps = {
-  display: 'inline-block',
-  px: 4
-}
-
 const code = `
 import {
   BackgroundSliderContainer,
@@ -58,7 +44,7 @@ export default () => (
 
 storiesOf('Elements', module).add('BackgroundSlider', () => (
   <Story name='BackgroundSlider' code={code}>
-    <BackgroundSliderContainer py={0} px={0} maxWidth='100%'>
+    <BackgroundSliderContainer css={theme({ p: 0, maxWidth: '100%' })}>
       <BackgroundSlider duration={80} animationDirection='reverse'>
         {range(30).map(index => (
           <LogoWrap key={index}>

diff --git a/src/components/elements/Badge/Badge.js b/src/components/elements/Badge/Badge.js
@@ -1,23 +1,27 @@
 import styled from 'styled-components'
+import { theme } from 'theme'
+import React from 'react'
+
 import Text from '../Text'
 
-const Badge = styled(Text)`
+const StyledBadge = styled(Text)`
   padding: 2px 12px;
   text-transform: uppercase;
   position: relative;
   vertical-align: middle;
+
+  ${theme({
+    letterSpacing: 2,
+    border: '0.5px solid',
+    fontSize: '12px',
+    fontWeight: 'bold',
+    bg: 'secondary',
+    borderRadius: 5,
+    fontFamily: 'sans',
+    color: 'white'
+  })}
 `
 
-Badge.defaultProps = {
-  letterSpacing: 2,
-  border: '0.5px solid',
-  as: 'span',
-  fontSize: '12px',
-  fontWeight: 'bold',
-  bg: 'secondary',
-  borderRadius: 5,
-  fontFamily: 'sans',
-  color: 'white'
-}
+const Badge = props => <StyledBadge as='span' {...props} />
 
 export default Badge
diff --git a/src/components/elements/Box.js b/src/components/elements/Box.js
@@ -1,63 +1,17 @@
 import {
-  compose,
-  space,
+  border,
   color,
-  borders,
-  lineHeight,
-  width,
-  flex,
-  order,
-  alignSelf,
+  compose,
+  layout,
   position,
-  fontSize,
-  variant,
-  textAlign,
-  maxWidth,
-  boxShadow,
-  display,
-  height
-} from 'styled-system'
+  space,
+  variant
+} 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' })
-  )
+  compose(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