From c4b93ad1209139f044976c1691e5d46706e77dde Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 08:56:29 +0200 Subject: [PATCH 1/8] feat: Export types inside build --- package.json | 2 +- tsconfig-build.json | 26 ++++++++++++++++++++------ tsconfig.json | 13 ++++++++----- 3 files changed, 29 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 986c5cb577..292fc244d5 100644 --- a/package.json +++ b/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", diff --git a/tsconfig-build.json b/tsconfig-build.json index afcb276002..93cd084396 100644 --- a/tsconfig-build.json +++ b/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, + + } } diff --git a/tsconfig.json b/tsconfig.json index 00e826421a..735ad6d4cc 100644 --- a/tsconfig.json +++ b/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 } } From 8ca419bb36bfd2c20405c28c895687ea3f8c16cd Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 11:56:05 +0200 Subject: [PATCH 2/8] refactor(Spinner): Use I18n hook instead HOC --- react/Spinner/index.jsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/react/Spinner/index.jsx b/react/Spinner/index.jsx index e46241883e..d707cca09a 100644 --- a/react/Spinner/index.jsx +++ b/react/Spinner/index.jsx @@ -6,10 +6,9 @@ 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' export const Spinner = ({ - t, loadingType, middle, noMargin, @@ -17,6 +16,7 @@ export const Spinner = ({ size, className }) => { + const { t } = useI18n() const realsizeMapping = { tiny: 8, small: 12, @@ -73,4 +73,4 @@ Spinner.defaultProps = { className: '' } -export default translate()(Spinner) +export default Spinner From 82a4ab0a8101f7ad970878ea3e24dd15a31d05f7 Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 11:57:12 +0200 Subject: [PATCH 3/8] feat(Spinner): Add types --- react/Spinner/index.jsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) diff --git a/react/Spinner/index.jsx b/react/Spinner/index.jsx index d707cca09a..dafca20995 100644 --- a/react/Spinner/index.jsx +++ b/react/Spinner/index.jsx @@ -8,6 +8,19 @@ import SpinnerIcon from '../Icons/Spinner' import Typography from '../Typography' 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 = ({ loadingType, middle, From c5f454f6f5dbf9cb5c08edf3f28e6d0b64173a74 Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 12:10:11 +0200 Subject: [PATCH 4/8] feat(Breakpoints): Add types to useBreakpoints --- react/helpers/breakpoints.js | 16 ++++++++++++++++ react/providers/Breakpoints/index.jsx | 4 ++++ 2 files changed, 20 insertions(+) diff --git a/react/helpers/breakpoints.js b/react/helpers/breakpoints.js index 3b36e84df1..6a75413e72 100644 --- a/react/helpers/breakpoints.js +++ b/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( diff --git a/react/providers/Breakpoints/index.jsx b/react/providers/Breakpoints/index.jsx index 05619af490..4ea00e5d33 100644 --- a/react/providers/Breakpoints/index.jsx +++ b/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) { From b52eed28404cb169cfbe8bde4ebb7c8ea5567c26 Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 15:49:10 +0200 Subject: [PATCH 5/8] feat(I18n): Add types to useI18n --- react/providers/I18n/index.jsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/react/providers/I18n/index.jsx b/react/providers/I18n/index.jsx index 4d323e1c95..f20a46c10c 100644 --- a/react/providers/I18n/index.jsx +++ b/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) From 23fbaf657150cddacf2f74d7631dd75533d7e061 Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 15:54:23 +0200 Subject: [PATCH 6/8] feat(ListItemText): Add types --- react/Buttons/index.jsx | 17 +++++++++++++++++ react/ListItemText/index.jsx | 10 ++++++++++ react/providers/CozyTheme/index.jsx | 8 ++++++++ 3 files changed, 35 insertions(+) diff --git a/react/Buttons/index.jsx b/react/Buttons/index.jsx index 92d2aeacb1..e2b65436cd 100644 --- a/react/Buttons/index.jsx +++ b/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 + */ const DefaultButton = forwardRef( ( { variant, className, color, label, busy, disabled, endIcon, ...props }, @@ -50,6 +64,9 @@ DefaultButton.defaultProps = { color: 'primary' } +/** + @type React.ForwardRefRenderFunction + */ const Buttons = forwardRef(({ variant, className = '', ...props }, ref) => { switch (variant) { case 'ghost': diff --git a/react/ListItemText/index.jsx b/react/ListItemText/index.jsx index ca1993a653..9a74d57570 100644 --- a/react/ListItemText/index.jsx +++ b/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 + */ const ListItemText = forwardRef((props, ref) => { const { primaryText, diff --git a/react/providers/CozyTheme/index.jsx b/react/providers/CozyTheme/index.jsx index 2e95406786..768e80b33e 100644 --- a/react/providers/CozyTheme/index.jsx +++ b/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 From a386c4d2e0c5ee4cff46da26a790c4c5e4a19385 Mon Sep 17 00:00:00 2001 From: cballevre Date: Wed, 21 Aug 2024 15:56:39 +0200 Subject: [PATCH 7/8] feat(ActionsMenuItem): Add types --- react/ActionsMenu/ActionsMenuItem.jsx | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/react/ActionsMenu/ActionsMenuItem.jsx b/react/ActionsMenu/ActionsMenuItem.jsx index b965662adb..07c95d5b22 100644 --- a/react/ActionsMenu/ActionsMenuItem.jsx +++ b/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 + */ const ActionsMenuItem = forwardRef( ({ isListItem, className, ...props }, ref) => { const Component = isListItem ? ListItem : MenuItem From a2048d97acdc7ab85ea2a529da7546c3cf3ac880 Mon Sep 17 00:00:00 2001 From: cballevre Date: Fri, 29 Nov 2024 18:18:54 +0100 Subject: [PATCH 8/8] feat: Update babel-preset-cozy-app from 2.0.2 to 2.8.1 --- package.json | 2 +- yarn.lock | 27 ++++++++++++++++----------- 2 files changed, 17 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index 292fc244d5..75753bcff0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/yarn.lock b/yarn.lock index 79780c0159..a848a08ce2 100644 --- a/yarn.lock +++ b/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 @@ babel-preset-cozy-app@2.0.2: "@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" -browserslist-config-cozy@0.4.0, browserslist-config-cozy@^0.4.0: +browserslist-config-cozy@0.4.0: 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== + browserslist@4.7.0, 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"