feat: Add codemod to use the breakpoints hook

codemods/use-breakpoints-hook/example-after.js

@@ -0,0 +1,16 @@
+import React from 'react'
+import { useBreakpoints } from 'cozy-ui/transpiled/react'
+
+const MobileComponent = () => <>Mobile</>
+const DesktopComponent = () => <>Desktop</>
+
+const Component = () => {
+  const { isMobile, isDesktop } = useBreakpoints()
+  return isMobile ? (
+    <MobileComponent />
+  ) : isDesktop ? (
+    <DesktopComponent />
+  ) : null
+}
+
+export default otherHoc(Component)

codemods/use-breakpoints-hook/example-before.js

@@ -0,0 +1,19 @@
+import React from 'react'
+import compose from 'lodash/flowRight'
+import { withBreakpoints } from 'cozy-ui/transpiled/react'
+
+const MobileComponent = () => <>Mobile</>
+const DesktopComponent = () => <>Desktop</>
+
+const Component = ({ breakpoints: { isMobile, isDesktop } }) => {
+  return isMobile ? (
+    <MobileComponent />
+  ) : isDesktop ? (
+    <DesktopComponent />
+  ) : null
+}
+
+export default compose(
+  withBreakpoints(),
+  otherHoc
+)(Component)

codemods/use-breakpoints-hook/index.js

@@ -0,0 +1,49 @@
+import { hocReplacer } from '@cozy/codemods'
+
+const isBreakpointProp = prop => {
+  return prop.key && prop.key.name === 'breakpoints'
+}
+
+const findBreakpointsProp = objPattern => {
+  if (!objPattern) {
+    return
+  }
+  if (objPattern.type !== 'ObjectPattern') {
+    return
+  }
+
+  return objPattern.properties
+    ? objPattern.properties.filter(isBreakpointProp).map(prop => prop)
+    : []
+}
+
+export default function transformer(file, api) {
+  const j = api.jscodeshift
+  const root = j(file.source)
+
+  const replaceBreakpointsHOC = hocReplacer({
+    propsFilter: isBreakpointProp,
+    propsFinder: findBreakpointsProp,
+    hookUsage: foundProps => {
+      return `const ${foundProps
+        .map(p => j(p.value).toSource())
+        .join(', ')} = useBreakpoints()`
+    },
+    hocName: 'withBreakpoints',
+    j,
+    importOptions: {
+      filter: x => {
+        return (
+          x.source.value == 'cozy-ui/transpiled/react' ||
+          x.source.value == 'cozy-ui/react'
+        )
+      },
+      specifiers: {
+        useBreakpoints: true
+      },
+      package: 'cozy-ui/transpiled/react'
+    }
+  })
+
+  return replaceBreakpointsHOC(root)
+}