microlinkhq
diff --git a/‎.storybook/main.js
Lines changed: 4 additions & 2 deletions b/‎.storybook/main.js
Lines changed: 4 additions & 2 deletions
diff --git a/‎.storybook/preview.js
Lines changed: 9 additions & 8 deletions b/‎.storybook/preview.js
Lines changed: 9 additions & 8 deletions
diff --git a/‎package.json
Lines changed: 26 additions & 24 deletions b/‎package.json
Lines changed: 26 additions & 24 deletions
diff --git a/‎scripts/fetch-data/providers/fetch-formats.js
Lines changed: 0 additions & 3 deletions b/‎scripts/fetch-data/providers/fetch-formats.js
Lines changed: 0 additions & 3 deletions
diff --git a/‎scripts/fetch-data/providers/fetch-user-agents.js
Lines changed: 38 additions & 0 deletions b/‎scripts/fetch-data/providers/fetch-user-agents.js
Lines changed: 38 additions & 0 deletions
diff --git a/‎src/components/elements/BackgroundSlider/BackgroundSlider.js
Lines changed: 6 additions & 6 deletions b/‎src/components/elements/BackgroundSlider/BackgroundSlider.js
Lines changed: 6 additions & 6 deletions
diff --git a/‎src/components/elements/BackgroundSlider/BackgroundSlider.stories.js
Lines changed: 8 additions & 22 deletions b/‎src/components/elements/BackgroundSlider/BackgroundSlider.stories.js
Lines changed: 8 additions & 22 deletions
diff --git a/‎src/components/elements/Badge/Badge.js
Lines changed: 16 additions & 12 deletions b/‎src/components/elements/Badge/Badge.js
Lines changed: 16 additions & 12 deletions
diff --git a/‎src/components/elements/Box.js
Lines changed: 7 additions & 53 deletions b/‎src/components/elements/Box.js
Lines changed: 7 additions & 53 deletions
@@ -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')
             ]
           }
         }
 
@@ -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>
 
@@ -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"
 
@@ -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 () =>
 
@@ -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')
+  })
@@ -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 {
 
@@ -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}>
 
@@ -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
@@ -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
Original file line number	Diff line number	Diff line change
`@@ -5,7 +5,8 @@ module.exports = {`
`5`	`5`	`addons: ['@storybook/addon-a11y', '@storybook/addon-essentials'],`
`6`	`6`	`framework: '@storybook/react',`
`7`	`7`	`core: {`
`8`		`- builder: 'webpack5'`
	`8`	`+ builder: 'webpack5',`
	`9`	`+ disableTelemetry: true`
`9`	`10`	`},`
`10`	`11`	`webpackFinal: async config => {`
`11`	`12`	`// Remove core-js to prevent issues with Storybook`
`@@ -29,7 +30,8 @@ module.exports = {`
`29`	`30`	`// use babel-plugin-remove-graphql-queries to remove static queries from components when rendering in storybook`
`30`	`31`	`require.resolve('babel-plugin-remove-graphql-queries'),`
`31`	`32`	`// use babel-plugin-react-docgen to ensure PropTables still appear`
`32`		`- require.resolve('babel-plugin-react-docgen')`
	`33`	`+ require.resolve('babel-plugin-react-docgen'),`
	`34`	`+ require.resolve('babel-plugin-styled-components')`
`33`	`35`	`]`
`34`	`36`	`}`
`35`	`37`	`}`