Add some type packages

.eslintignore

@@ -1,2 +1,2 @@
-react/Icon/icons-sprite.js
-react/palette.js
+react/Icon/icons-sprite.ts
+react/palette.ts

.gitignore

@@ -23,6 +23,6 @@ desktop.ini
 transpiled
 
 # Generated files
-react/Icon/icons-sprite.js
-react/palette.js
+react/Icon/icons-sprite.ts
+react/palette.ts
 /screenshots

docs/styleguide.config.js

@@ -86,8 +86,8 @@ module.exports = {
         '../react/BottomDrawer/index.jsx',
         '../react/BottomSheet/index.jsx',
         '../react/Empty/index.jsx',
-        '../react/Figure/Figure.jsx',
-        '../react/Figure/FigureBlock.jsx',
+        '../react/Figure/Figure/index.jsx',
+        '../react/Figure/FigureBlock/index.jsx',
         '../react/Filename/index.jsx',
         '../react/FilePath/index.jsx',
         '../react/FilePathLink/index.jsx',
@@ -161,11 +161,11 @@ module.exports = {
     {
       name: 'Hooks',
       components: () => [
-        '../react/hooks/useBrowserOffline.jsx',
+        '../react/hooks/useBrowserOffline/index.js',
         '../react/hooks/useConfirmExit/index.jsx',
-        '../react/hooks/useCycle.jsx',
-        '../react/hooks/useEventListener.js',
-        '../react/hooks/usePeriodicRender.js'
+        '../react/hooks/useCycle/index.js',
+        '../react/hooks/useEventListener/index.js',
+        '../react/hooks/usePeriodicRender/index.js'
       ]
     },
     {

package.json

@@ -33,7 +33,7 @@
     "deploy:doc": "git-directory-deploy --directory build/ --branch gh-pages",
     "makeSvgr": "scripts/generate-svgr-icon.sh",
     "lint": "npm-run-all 'lint:*'",
-    "lint:js": "eslint 'react/**/*.jsx' 'react/**/*.js' 'react/**/*.ts' 'docs/styleguide.config.js'",
+    "lint:js": "eslint 'react/**/*.{jsx,js,tsx,ts}' 'docs/styleguide.config.js'",
     "lint:stylus": "stylint stylus --config .stylintrc",
     "lint:md": "remark . -o -S",
     "palette": "scripts/make-palette.sh",
@@ -83,6 +83,34 @@
     "@testing-library/react": "11.2.7",
     "@testing-library/react-hooks": "^3.2.1",
     "@testing-library/user-event": "^14.4.2",
+    "@types/babel__core": "7.1.19",
+    "@types/copyfiles": "2.4.1",
+    "@types/cssnano": "5.1.0",
+    "@types/enzyme": "3.10.12",
+    "@types/enzyme-adapter-react-16": "1.0.6",
+    "@types/enzyme-to-json": "1.5.4",
+    "@types/eslint": "8.4.6",
+    "@types/eslint-plugin-prettier": "^3.1.0",
+    "@types/express": "^4.17.14",
+    "@types/http-server": "0.12.1",
+    "@types/kss": "3.0.1",
+    "@types/lodash": "4.14.185",
+    "@types/mini-css-extract-plugin": "2.5.1",
+    "@types/nodemon": "1.19.2",
+    "@types/pretty": "2.0.0",
+    "@types/prop-types": "15.7.2",
+    "@types/react": "18.0.20",
+    "@types/react-dom": "18.0.6",
+    "@types/react-redux": "7.1.24",
+    "@types/react-test-renderer": "18.0.0",
+    "@types/redux-mock-store": "^1.0.3",
+    "@types/semantic-release": "17.2.4",
+    "@types/stylus": "^0.48.38",
+    "@types/svg-sprite-loader": "3.9.5",
+    "@types/svgo": "2.6.4",
+    "@types/testing-library__jest-dom": "^5.14.5",
+    "@types/testing-library__react-hooks": "^3.4.1",
+    "@types/webpack": "4.39.3",
     "autoprefixer-stylus": "1.0.0",
     "babel-loader": "8.2.4",
     "babel-plugin-css-modules-transform": "1.6.2",
@@ -157,9 +185,16 @@
     "@material-ui/core": "4.12.3",
     "@material-ui/lab": "^4.0.0-alpha.61",
     "@popperjs/core": "^2.4.4",
+    "@types/hammerjs": "^2.0.41",
+    "@types/mime-types": "^2.1.1",
+    "@types/node-polyglot": "^2.2.2",
+    "@types/piwik-react-router": "^0.12.0",
+    "@types/react-pdf": "^4.0.5",
+    "@types/react-select": "^4.0.18",
+    "@types/react-swipeable-views": "^0.13.1",
     "bundlemon": "^1.3.2",
     "chart.js": "3.7.1",
-    "classnames": "^2.2.5",
+    "classnames": "^2.3.2",
     "cozy-interapp": "^0.5.4",
     "date-fns": "^1.28.5",
     "filesize": "8.0.7",

react/ActionMenu/ActionMenuEffects.ts

@@ -7,7 +7,7 @@ import { Theme, useTheme } from '@material-ui/core'
 import { isFlagshipApp } from 'cozy-device-helper'
 
 import { getCssVariableValue } from '../utils/color'
-import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUI'
 
 const getBottomBackground = (theme: Theme): string => {
   const sidebar = document.getElementById('sidebar')

react/ActionMenu/index.spec.jsx

@@ -10,7 +10,7 @@ import Icon from '../Icon'
 import FileIcon from '../Icons/File'
 import WarningIcon from '../Icons/Warning'
 
-import ActionMenu, { ActionMenuItem, ActionMenuRadio } from './'
+import ActionMenu, { ActionMenuItem, ActionMenuRadio } from '.'
 
 describe('ActionMenu', () => {
   fixPopperTesting()

react/Alerter/alerter.spec.js

@@ -4,7 +4,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import Alerter from './'
+import Alerter from '.'
 import Alert from './Alert'
 import Button from '../Button'
 

react/AppIcon/test/AppIcon.spec.js

@@ -4,7 +4,7 @@
 import React from 'react'
 import { shallow } from 'enzyme'
 
-import { AppIcon } from '../'
+import { AppIcon } from '..'
 
 describe('AppIcon component', () => {
   const app = {}

react/AppLinker/index.deprecated.spec.jsx

@@ -19,7 +19,7 @@ import {
   checkApp
 } from 'cozy-device-helper'
 
-import AppLinker from './index'
+import AppLinker from '.'
 import { generateUniversalLink } from './native'
 jest.useFakeTimers()
 

react/AppLinker/index.spec.jsx

@@ -11,7 +11,7 @@ import {
   checkApp
 } from 'cozy-device-helper'
 
-import AppLinker from './index'
+import AppLinker from '.'
 import { generateUniversalLink } from './native'
 jest.useFakeTimers()
 

react/AppLinker/native.js

@@ -3,7 +3,7 @@ import {
   ensureFirstSlash
 } from 'cozy-client'
 
-import { UNIVERSAL_LINK_URL } from './native.config.js'
+import { UNIVERSAL_LINK_URL } from './native.config'
 
 export const getUniversalLinkDomain = () => {
   return UNIVERSAL_LINK_URL

react/AppTile/AppTile.spec.jsx

@@ -9,7 +9,7 @@ import CozyClient, { CozyProvider } from 'cozy-client'
 import en from '../AppSections/locales/en.json'
 import I18n from '../I18n'
 
-import AppTile from './index'
+import AppTile from '.'
 
 const appMock = {
   slug: 'test',

react/Banner/index.spec.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { render } from '@testing-library/react'
-import Banner from './index'
+import Banner from '.'
 
 describe('Grid', () => {
   it('should render correctly justify content', () => {

react/BottomSheet/BottomSheet.jsx

@@ -30,7 +30,7 @@ import {
   computeBottomSpacer
 } from './helpers'
 import { ANIMATION_DURATION } from './constants'
-import { useSetFlagshipUI } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { useSetFlagshipUI } from '../hooks/useSetFlagshipUI'
 
 const createContainerWrapperStyles = () => ({
   container: {

react/CipherIcon/index.spec.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import CipherIcon from './index'
+import CipherIcon from '.'
 
 jest.mock('cozy-client', () => ({
   withClient: Component => {

react/ContactsListModal/index.jsx

@@ -13,7 +13,7 @@ import {
   useCozyDialog
 } from '../CozyDialogs'
 import useRealtime from '../hooks/useRealtime'
-import useEventListener from '../hooks/useEventListener.js'
+import useEventListener from '../hooks/useEventListener'
 import useBreakpoints from '../hooks/useBreakpoints'
 import Button from '../Buttons'
 import PlusIcon from '../Icons/Plus'

react/CozyDialogs/e2e.js

@@ -1,4 +1,4 @@
-module.exports = async (page, screenshot) => {
+export default async (page, screenshot) => {
   for (const dialogType of [
     'Dialog',
     'ConfirmDialog',

react/DateMonthPicker/index.spec.jsx

@@ -1,6 +1,6 @@
 import { mount } from 'enzyme'
 import React from 'react'
-import DateMonthPicker from './index'
+import DateMonthPicker from '.'
 import { act } from 'react-dom/test-utils'
 
 import I18n from '../I18n'

react/Dialog/DialogEffects.spec.tsx

@@ -8,7 +8,7 @@ import { WebviewIntentProvider, WebviewService } from 'cozy-intent'
 import Dialog from '.'
 import { BreakpointsProvider } from '../hooks/useBreakpoints'
 import { DOMStrings, makeOnMount, makeOnUnmount } from './DialogEffects'
-import { ThemeColor } from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { ThemeColor } from '../hooks/useSetFlagshipUI'
 
 const theme = {
   palette: {

react/Dialog/DialogEffects.ts

@@ -4,11 +4,7 @@ import { useEffect } from 'react'
 import { getFlagshipMetadata, isFlagshipApp } from 'cozy-device-helper'
 import { useWebviewIntent } from 'cozy-intent'
 
-import {
-  FlagshipUI,
-  ThemeColor,
-  parseArg
-} from '../hooks/useSetFlagshipUi/useSetFlagshipUI'
+import { FlagshipUI, ThemeColor, parseArg } from '../hooks/useSetFlagshipUI'
 
 interface DialogEffectsOptions {
   cozybar?: Element | null
@@ -146,7 +142,7 @@ const useHook = (open: boolean, fullscreen?: boolean): void => {
 }
 
 /**
- * Custom version of useSetFlagshipUi() that is aware of the Dialog component.
+ * Custom version of useSetFlagshipUI() that is aware of the Dialog component.
  *
  * The difference here is that we send messages to the Native app when a props change.
  * In the original version, we send the mount message as soon as the component is rendered.

react/Field/index.spec.js

@@ -1,5 +1,5 @@
 import React from 'react'
-import Field from './'
+import Field from '.'
 import { shallow } from 'enzyme'
 
 describe('Field component', () => {