[VO-1016] feat: Export types inside npm build

package.json

@@ -27,7 +27,7 @@
     "build:doc:config": "copyfiles -u 1 docs/*.md docs/_config.yml build",
     "build:doc:kss": "NODE_OPTIONS=--openssl-legacy-provider kss --destination build/styleguide --title 'Cozy-UI Styleguide' --source stylus --builder node_modules/michelangelo/kss_styleguide/custom-template --homepage stylus/styleguide.md --css app.css",
     "build:doc:react": "NODE_OPTIONS=--openssl-legacy-provider styleguidist build --config docs/styleguide.config.js",
-    "build:types": "tsc -p tsconfig-build.json",
+    "build:types": "tsc -p tsconfig.json",
     "build:all": "yarn makeSpriteAndPalette && yarn build && yarn build:css:all && yarn build:doc",
     "build:js": "env BABEL_ENV=transpilation babel --extensions .ts,.tsx,.js,.jsx,.md,.styl,.json,.snap react/ --out-dir transpiled/react --copy-files --no-copy-ignored --verbose",
     "build": "yarn build:types && yarn build:js",
@@ -159,7 +159,8 @@
     "svgo": "2.8.0",
     "svgstore-cli": "1.3.2",
     "url-loader": "1.1.2",
-    "webpack": "4.39.3"
+    "webpack": "4.39.3",
+    "typescript": "4.9.5"
   },
   "dependencies": {
     "@babel/runtime": "^7.3.4",
@@ -211,4 +212,4 @@
   "browserslist": [
     "extends browserslist-config-cozy"
   ]
-}
+}

react/ActionsMenu/ActionsMenuItem.jsx

@@ -12,6 +12,15 @@ const cleanPropsForDOM = props => {
   return omit(props, nonDOMProps)
 }
 
+/**
+ * @typedef ListItemTextPropTypes
+ * @property {boolean} [isListItem] - Whether the ActionsMenuItem will return a ListItem or MenuItem.
+ * @property {string} [className] - Additional CSS class names for the list item text.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, ListItemTextPropTypes>
+ */
 const ActionsMenuItem = forwardRef(
   ({ isListItem, className, ...props }, ref) => {
     const Component = isListItem ? ListItem : MenuItem

react/Buttons/index.jsx

@@ -8,6 +8,20 @@ import SpinnerIcon from '../Icons/Spinner'
 
 const CUSTOM_COLORS = ['success', 'error', 'warning', 'info']
 
+/**
+ * @typedef {object} DefaultButtonPropTypes
+ * @property {string} [variant] - The variant of the button ('contained', 'outlined', 'text').
+ * @property {string} [className] - Additional CSS class names for the button.
+ * @property {string} [color] - The color of the button ('default', 'inherit', 'primary', 'secondary', 'success', 'error', 'warning', 'info').
+ * @property {string} [label] - The label of the button.
+ * @property {boolean} [busy] - Whether the button is in a busy state.
+ * @property {boolean} [disabled] - Whether the button is disabled.
+ * @property {React.ReactNode} [endIcon] - The icon to display at the end of the button.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLButtonElement, DefaultButtonPropTypes & MuiButton>
+ */
 const DefaultButton = forwardRef(
   (
     { variant, className, color, label, busy, disabled, endIcon, ...props },
@@ -50,6 +64,9 @@ DefaultButton.defaultProps = {
   color: 'primary'
 }
 
+/**
+ @type React.ForwardRefRenderFunction<HTMLButtonElement, DefaultButtonPropTypes & MuiButton>
+ */
 const Buttons = forwardRef(({ variant, className = '', ...props }, ref) => {
   switch (variant) {
     case 'ghost':

react/ListItemText/index.jsx

@@ -22,6 +22,16 @@ const getTypographyProp = (props, className, ellipsis) => {
       }
 }
 
+/**
+ * @typedef {object} ListItemTextPropTypes
+ * @property {string} [primary] - The primary text of the list item.
+ * @property {string} [secondary] - The secondary text of the list item.
+ * @property {string} [className] - Additional CSS class names for the list item text.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, ListItemTextPropTypes>
+ */
 const ListItemText = forwardRef((props, ref) => {
   const {
     primaryText,

react/Spinner/index.jsx

@@ -6,17 +6,30 @@ import styles from './styles.styl'
 import Icon from '../Icon'
 import SpinnerIcon from '../Icons/Spinner'
 import Typography from '../Typography'
-import { translate } from '../providers/I18n'
+import { useI18n } from '../providers/I18n'
 
+/**
+ * @typedef SpinnerProps
+ * @property {string} [loadingType] - The type of loading.
+ * @property {boolean} [middle] - Whether to position the spinner in the middle.
+ * @property {boolean} [noMargin] - Whether to remove margin around the spinner.
+ * @property {string} [color] - The color of the spinner.
+ * @property {'tiny'|'small'|'medium'|'large'|'xlarge'|'xxlarge'} [size] - The size of the spinner.
+ * @property {string} [className] - The additional CSS class name for the spinner.
+ */
+
+/**
+ * @param {SpinnerProps} props
+ */
 export const Spinner = ({
-  t,
   loadingType,
   middle,
   noMargin,
   color,
   size,
   className
 }) => {
+  const { t } = useI18n()
   const realsizeMapping = {
     tiny: 8,
     small: 12,
@@ -73,4 +86,4 @@ Spinner.defaultProps = {
   className: ''
 }
 
-export default translate()(Spinner)
+export default Spinner

react/Typography/index.jsx

@@ -1,6 +1,16 @@
 import MuiTypography from '@material-ui/core/Typography'
 import React, { forwardRef } from 'react'
 
+/**
+ * @typedef TypographyPropTypes
+ * @property {string} [color] - The color of the text.
+ * @property {string} [variant] - The variant of the text.
+ * @property {React.ReactNode} children - The content of the component.
+ */
+
+/**
+ * @type React.ForwardRefRenderFunction<HTMLDivElement, TypographyPropTypes & MuiTypography>
+ */
 const Typography = forwardRef(({ color, variant, children, ...props }, ref) => {
   const madeColor =
     color || (variant === 'caption' ? 'textSecondary' : 'textPrimary')

react/helpers/breakpoints.js

@@ -5,6 +5,18 @@ const medium = 1023
 const small = 768
 const tiny = 543
 
+/**
+ * @typedef BreakpointsStatusType
+ * @property {boolean} isExtraLarge
+ * @property {boolean} isLarge
+ * @property {boolean} isMedium
+ * @property {boolean} isSmall
+ * @property {boolean} isTiny
+ * @property {boolean} isDesktop
+ * @property {boolean} isTablet
+ * @property {boolean} isMobile
+ */
+
 const breakpoints = {
   isExtraLarge: [large + 1],
   isLarge: [medium + 1, large],
@@ -16,6 +28,10 @@ const breakpoints = {
   isMobile: [0, small]
 }
 
+/**
+ * @param {Object} breakpoints
+ * @returns {BreakpointsStatusType}
+ */
 export const getBreakpointsStatus = breakpoints => {
   const width = window.innerWidth
   return mapValues(

react/providers/Breakpoints/index.jsx

@@ -31,6 +31,10 @@ export const BreakpointsProvider = ({ children }) => {
   )
 }
 
+/**
+ *
+ * @returns {import('../../helpers/breakpoints').BreakpointsStatusType}
+ */
 export const useBreakpoints = () => {
   const v = useContext(BreakpointsCtx)
   if (v === null) {

react/providers/CozyTheme/index.jsx

@@ -27,6 +27,14 @@ export const useCozyTheme = () => {
   return context
 }
 
+/**
+ * CozyTheme component.
+ *
+ * @component
+ * @param {object} props
+ * @param {boolean} [props.ignoreCozySettings] - Whether to ignore Cozy settings.
+ * @returns {JSX.Element} The rendered CozyTheme component.
+ */
 const CozyTheme = ({ ignoreCozySettings, ...props }) => {
   const Comp =
     ignoreCozySettings || process.env.NODE_ENV === 'test' || isRsg

react/providers/I18n/index.jsx

@@ -14,6 +14,9 @@ export const DEFAULT_LANG = 'en'
 
 export const I18nContext = React.createContext()
 
+/**
+ * @returns {{ t: (key: string) => string, lang: string }}
+ */
 export const useI18n = () => {
   const context = useContext(I18nContext)
 

tsconfig-build.json

@@ -1,14 +1,28 @@
 {
-  "extends": "./tsconfig.json",
-  "include": [
-    "react/**/*.ts",
-    "react/**/*.tsx",
-  ],
+  "include": ["react/**/*"],
   "exclude": [
     "tests",
     "**/*.spec.tsx",
     "**/*.spec.ts",
     "**/*.test.tsx",
     "**/*.test.ts"
-  ]
+  ],
+  "compilerOptions": {
+
+    // Tells TypeScript to read JS files, as
+    // normally they are ignored as source files
+    "allowJs": true,
+    // Generate d.ts files
+    "declaration": true,
+    // This compiler run should
+    // only output d.ts files
+    "emitDeclarationOnly": true,
+    "outDir": "transpiled",
+    // go to js file when using IDE functions like
+    // "Go to Definition" in VSCode
+    "baseUrl": "./react",
+    "jsx": "react",
+    "esModuleInterop": true,
+
+  }
 }

tsconfig.json

@@ -4,14 +4,16 @@
   ],
   "exclude": [
     "node_modules",
-    "transpiled"
+    "transpiled",
+    "**/*.spec.ts",
+    "**/*.spec.tsx",
   ],
   "compilerOptions": {
     "allowJs": true,
     "allowSyntheticDefaultImports": true,
-    "baseUrl": "./src",
+    "baseUrl": "./react",
     "declaration": true,
-    "declarationDir": "./transpiled/react",
+    "declarationDir": "./transpiled",
     "emitDeclarationOnly": true,
     "esModuleInterop": true,
     "forceConsistentCasingInFileNames": true,
@@ -27,7 +29,8 @@
     "noFallthroughCasesInSwitch": true,
     "resolveJsonModule": true,
     "skipLibCheck": true,
-    "strict": true,
-    "target": "es5"
+    "strict": false,
+    "target": "es5",
+    "declarationMap": true
   }
 }

yarn.lock

@@ -20529,6 +20529,11 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
+[email protected]:
+  version "4.9.5"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.9.5.tgz#095979f9bcc0d09da324d58d03ce8f8374cbe65a"
+  integrity sha512-1FXk9E2Hm+QzZQ7z+McJiHL4NW1F2EzMu9Nq9i3zAaGqibafqYwCVU6WyWAuyQRRzOlxou8xZSyXLEN8oKj24g==
+
 typescript@^4.5.2:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"