[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",
@@ -90,7 +90,7 @@
     "babel-loader": "8.2.4",
     "babel-plugin-css-modules-transform": "1.6.2",
     "babel-plugin-inline-json-import": "0.3.2",
-    "babel-preset-cozy-app": "2.0.2",
+    "babel-preset-cozy-app": "2.8.1",
     "browserslist-config-cozy": "0.4.0",
     "bundlemon": "3.1.0",
     "copyfiles": "2.4.1",

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/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

@@ -4230,10 +4230,10 @@ babel-plugin-polyfill-regenerator@^0.3.0:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.3.1"
 
-babel-preset-cozy-app@2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-preset-cozy-app/-/babel-preset-cozy-app-2.0.2.tgz#057da4ac68b1340a58cde18dbd40e67e04f3b998"
-  integrity sha512-D7+LE5zVDFhD9fxfhjERr2qxfxf+pc8w6RWe5mV/bS5Hz2iULNlScslg2Pbz+U5gHQtxysxmwQYz8ufjZmfFbg==
+babel-preset-cozy-app@2.8.1:
+  version "2.8.1"
+  resolved "https://registry.yarnpkg.com/babel-preset-cozy-app/-/babel-preset-cozy-app-2.8.1.tgz#6c14bcdfee86195044907e35fb524c4fbdd66f65"
+  integrity sha512-ymg/4wfntdxJrxlp25edVtg33jpcpipiZtUhmJL/YK0cON9wLBmq2I+dVAaqMG2VFQjViXnegxXLew59uU8dxg==
   dependencies:
     "@babel/core" "7.16.12"
     "@babel/eslint-parser" "^7.16.3"
@@ -4245,9 +4245,9 @@ [email protected]:
     "@babel/preset-react" "^7.16.0"
     "@babel/preset-typescript" "^7.16.0"
     "@babel/runtime" "^7.16.3"
-    browserslist-config-cozy "^0.4.0"
+    browserslist-config-cozy "^0.11.1"
     lodash "^4.17.21"
-    typescript "^4.5.2"
+    typescript "5.5.2"
 
 babel-preset-current-node-syntax@^1.0.0:
   version "1.0.1"
@@ -4600,11 +4600,16 @@ browserify-zlib@^0.2.0:
   dependencies:
     pako "~1.0.5"
 
-[email protected], browserslist-config-cozy@^0.4.0:
+[email protected]:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/browserslist-config-cozy/-/browserslist-config-cozy-0.4.0.tgz#0b3fd831ce59c69e70b799a4e57a206535468878"
   integrity sha512-t2q4UoWotfnT9Zw/GKXgSh0nMyvUCQEji+EObSQXsUCnEwhac8Ae3AJYd2ySsEHZ/ufEX8f6kR6jPbWJqBpUUw==
 
+browserslist-config-cozy@^0.11.1:
+  version "0.11.1"
+  resolved "https://registry.yarnpkg.com/browserslist-config-cozy/-/browserslist-config-cozy-0.11.1.tgz#c0fd45c5e95f3f110facc7e7721f875103ac7364"
+  integrity sha512-w0YdkvnZtJhO9Cb5z7t0Fc+kU0JZiEUFCJkdJpxktJAU580NHuRIEw0UdV7HJuVnLfBYmPx4Ew4g/fUi5VXL3A==
+
 [email protected], browserslist@^4.0.0, browserslist@^4.6.3:
   version "4.7.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.7.0.tgz#9ee89225ffc07db03409f2fee524dc8227458a17"
@@ -19931,10 +19936,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.5.2:
-  version "4.6.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.6.2.tgz#fe12d2727b708f4eef40f51598b3398baa9611d4"
-  integrity sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==
+typescript@5.5.2:
+  version "5.5.2"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.5.2.tgz#c26f023cb0054e657ce04f72583ea2d85f8d0507"
+  integrity sha512-NcRtPEOsPFFWjobJEtfihkLCZCXZt/os3zf8nTxjVH3RvTSxjrCamJpbExGvYOF+tFHc3pA65qpdwPbzjohhew==
 
 uc.micro@^1.0.1, uc.micro@^1.0.5:
   version "1.0.6"