From 662b072db4aac9e14a094115be7b54b304b90d3c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ervin=20R=C3=A1cz?= Date: Fri, 13 Dec 2024 09:33:10 +0200 Subject: [PATCH] frontend: upgrade storybook Older storybook was giving webpack wearnings --- frontend/package-lock.json | 139 ++++++++++-------- frontend/package.json | 6 +- .../Activity/ActivityContainer.stories.tsx | 2 +- .../src/components/Channels/ChannelAvatar.tsx | 2 +- .../GroupCharts/StatusCountTimeline.tsx | 2 +- .../GroupCharts/VersionCountTimeline.tsx | 2 +- frontend/src/components/Instances/Charts.tsx | 2 +- frontend/src/components/Instances/Common.tsx | 3 +- frontend/src/components/Instances/Details.tsx | 6 +- frontend/src/components/Instances/List.tsx | 2 +- .../Instances/StatusHistoryList.tsx | 3 +- frontend/src/components/Packages/Item.tsx | 3 +- .../common/ColorPicker/ColorPicker.tsx | 2 +- .../common/SectionPaper/SectionPaper.tsx | 2 +- .../VersionBreakdownBar.tsx | 2 +- frontend/src/i18n/ThemeProviderNexti18n.tsx | 4 +- 16 files changed, 99 insertions(+), 83 deletions(-) diff --git a/frontend/package-lock.json b/frontend/package-lock.json index e0a6cf4dc..5ef86998d 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -17,7 +17,7 @@ "@types/dompurify": "^2.2.1", "@types/node": "^14.17.4", "@types/pubsub-js": "^1.8.2", - "@types/react": "^17.0.13", + "@types/react": "^18.3.16", "@types/react-color": "^3.0.4", "@types/react-dom": "^17.0.8", "@types/react-window": "^1.8.2", @@ -34,9 +34,9 @@ "moment-timezone": "^0.5.38", "prop-types": "^15.7.2", "pubsub-js": "^1.9.3", - "react": "^17.0.2", + "react": "^18.3.1", "react-color": "^2.17.3", - "react-dom": "^17.0.2", + "react-dom": "^18.3.1", "react-i18next": "^11.11.0", "react-redux": "^7.2.4", "react-router-dom": "^5.1.2", @@ -3822,30 +3822,7 @@ } } }, - "node_modules/@material-ui/icons": { - "version": "4.11.3", - "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", - "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", - "license": "MIT", - "dependencies": { - "@babel/runtime": "^7.4.4" - }, - "engines": { - "node": ">=8.0.0" - }, - "peerDependencies": { - "@material-ui/core": "^4.0.0", - "@types/react": "^16.8.6 || ^17.0.0", - "react": "^16.8.0 || ^17.0.0", - "react-dom": "^16.8.0 || ^17.0.0" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@material-ui/styles": { + "node_modules/@material-ui/core/node_modules/@material-ui/styles": { "version": "4.11.5", "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz", "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==", @@ -3887,7 +3864,7 @@ } } }, - "node_modules/@material-ui/system": { + "node_modules/@material-ui/core/node_modules/@material-ui/system": { "version": "4.12.2", "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz", "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==", @@ -3916,21 +3893,7 @@ } } }, - "node_modules/@material-ui/types": { - "version": "5.1.0", - "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", - "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", - "license": "MIT", - "peerDependencies": { - "@types/react": "*" - }, - "peerDependenciesMeta": { - "@types/react": { - "optional": true - } - } - }, - "node_modules/@material-ui/utils": { + "node_modules/@material-ui/core/node_modules/@material-ui/utils": { "version": "4.11.3", "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz", "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==", @@ -3948,6 +3911,43 @@ "react-dom": "^16.8.0 || ^17.0.0" } }, + "node_modules/@material-ui/icons": { + "version": "4.11.3", + "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.3.tgz", + "integrity": "sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==", + "license": "MIT", + "dependencies": { + "@babel/runtime": "^7.4.4" + }, + "engines": { + "node": ">=8.0.0" + }, + "peerDependencies": { + "@material-ui/core": "^4.0.0", + "@types/react": "^16.8.6 || ^17.0.0", + "react": "^16.8.0 || ^17.0.0", + "react-dom": "^16.8.0 || ^17.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@material-ui/types": { + "version": "5.1.0", + "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz", + "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@mdx-js/react": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/@mdx-js/react/-/react-3.1.0.tgz", @@ -6768,13 +6768,12 @@ "license": "MIT" }, "node_modules/@types/react": { - "version": "17.0.83", - "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz", - "integrity": "sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==", + "version": "18.3.16", + "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.16.tgz", + "integrity": "sha512-oh8AMIC4Y2ciKufU8hnKgs+ufgbA/dhPTACaZPM86AbwX9QwnFtSoPWEeRUj8fge+v6kFt78BXcDhAU1SrrAsw==", "license": "MIT", "dependencies": { "@types/prop-types": "*", - "@types/scheduler": "^0.16", "csstype": "^3.0.2" } }, @@ -6797,6 +6796,23 @@ "@types/react": "^17" } }, + "node_modules/@types/react-dom/node_modules/@types/react": { + "version": "17.0.83", + "resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.83.tgz", + "integrity": "sha512-l0m4ArKJvmFtR4e8UmKrj1pB4tUgOhJITf+mADyF/p69Ts1YAR/E+G9XEM0mHXKVRa1dQNHseyyDNzeuAXfXQw==", + "license": "MIT", + "dependencies": { + "@types/prop-types": "*", + "@types/scheduler": "^0.16", + "csstype": "^3.0.2" + } + }, + "node_modules/@types/react-dom/node_modules/csstype": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", + "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==", + "license": "MIT" + }, "node_modules/@types/react-redux": { "version": "7.1.34", "resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.34.tgz", @@ -21094,13 +21110,12 @@ } }, "node_modules/react": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react/-/react-17.0.2.tgz", - "integrity": "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz", + "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==", "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" }, "engines": { "node": ">=0.10.0" @@ -21247,17 +21262,16 @@ } }, "node_modules/react-dom": { - "version": "17.0.2", - "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz", - "integrity": "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==", + "version": "18.3.1", + "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", + "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==", "license": "MIT", "dependencies": { "loose-envify": "^1.1.0", - "object-assign": "^4.1.1", - "scheduler": "^0.20.2" + "scheduler": "^0.23.2" }, "peerDependencies": { - "react": "17.0.2" + "react": "^18.3.1" } }, "node_modules/react-error-overlay": { @@ -25946,13 +25960,12 @@ } }, "node_modules/scheduler": { - "version": "0.20.2", - "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.20.2.tgz", - "integrity": "sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==", + "version": "0.23.2", + "resolved": "https://registry.npmjs.org/scheduler/-/scheduler-0.23.2.tgz", + "integrity": "sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==", "license": "MIT", "dependencies": { - "loose-envify": "^1.1.0", - "object-assign": "^4.1.1" + "loose-envify": "^1.1.0" } }, "node_modules/schema-utils": { diff --git a/frontend/package.json b/frontend/package.json index 80c2fc910..5c4bc827e 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -18,7 +18,7 @@ "@types/dompurify": "^2.2.1", "@types/node": "^14.17.4", "@types/pubsub-js": "^1.8.2", - "@types/react": "^17.0.13", + "@types/react": "^18.3.16", "@types/react-color": "^3.0.4", "@types/react-dom": "^17.0.8", "@types/react-window": "^1.8.2", @@ -35,9 +35,9 @@ "moment-timezone": "^0.5.38", "prop-types": "^15.7.2", "pubsub-js": "^1.9.3", - "react": "^17.0.2", + "react": "^18.3.1", "react-color": "^2.17.3", - "react-dom": "^17.0.2", + "react-dom": "^18.3.1", "react-i18next": "^11.11.0", "react-redux": "^7.2.4", "react-router-dom": "^5.1.2", diff --git a/frontend/src/components/Activity/ActivityContainer.stories.tsx b/frontend/src/components/Activity/ActivityContainer.stories.tsx index 0458aaa3f..58cf811da 100644 --- a/frontend/src/components/Activity/ActivityContainer.stories.tsx +++ b/frontend/src/components/Activity/ActivityContainer.stories.tsx @@ -1,4 +1,4 @@ -import { Meta, Story } from '@storybook/react/types-6-0'; +import type { Meta } from '@storybook/react'; import { MemoryRouter } from 'react-router-dom'; import { activityStore } from '../../stores/Stores'; import ActivityContainer, { ActivityContainerProps } from './ActivityContainer'; diff --git a/frontend/src/components/Channels/ChannelAvatar.tsx b/frontend/src/components/Channels/ChannelAvatar.tsx index 837f62387..c19427588 100644 --- a/frontend/src/components/Channels/ChannelAvatar.tsx +++ b/frontend/src/components/Channels/ChannelAvatar.tsx @@ -1,6 +1,6 @@ import { Theme } from '@material-ui/core'; import Avatar from '@material-ui/core/Avatar'; -import makeStyles from '@material-ui/styles/makeStyles'; +import { makeStyles } from '@material-ui/core/styles'; export interface ChannelAvatarProps { backgroundColor?: string; diff --git a/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx b/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx index 94d463094..544926f51 100644 --- a/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx +++ b/frontend/src/components/Groups/GroupCharts/StatusCountTimeline.tsx @@ -3,8 +3,8 @@ import { Theme } from '@material-ui/core'; import Box from '@material-ui/core/Box'; import Chip from '@material-ui/core/Chip'; import Grid from '@material-ui/core/Grid'; +import { useTheme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import { useTheme } from '@material-ui/styles'; import React from 'react'; import _ from 'underscore'; import { Group } from '../../../api/apiDataTypes'; diff --git a/frontend/src/components/Groups/GroupCharts/VersionCountTimeline.tsx b/frontend/src/components/Groups/GroupCharts/VersionCountTimeline.tsx index c18270044..a5bb1370c 100644 --- a/frontend/src/components/Groups/GroupCharts/VersionCountTimeline.tsx +++ b/frontend/src/components/Groups/GroupCharts/VersionCountTimeline.tsx @@ -2,8 +2,8 @@ import { Theme } from '@material-ui/core'; import Box from '@material-ui/core/Box'; import Chip from '@material-ui/core/Chip'; import Grid from '@material-ui/core/Grid'; +import { useTheme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import { useTheme } from '@material-ui/styles'; import React from 'react'; import semver from 'semver'; import { Group } from '../../../api/apiDataTypes'; diff --git a/frontend/src/components/Instances/Charts.tsx b/frontend/src/components/Instances/Charts.tsx index 441571269..a41337dbe 100644 --- a/frontend/src/components/Instances/Charts.tsx +++ b/frontend/src/components/Instances/Charts.tsx @@ -1,8 +1,8 @@ import { IconifyIcon, InlineIcon } from '@iconify/react'; import { Theme } from '@material-ui/core'; import Grid from '@material-ui/core/Grid'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import { makeStyles, useTheme } from '@material-ui/styles'; import React from 'react'; import { Trans, useTranslation } from 'react-i18next'; import { Cell, Label, Pie, PieChart } from 'recharts'; diff --git a/frontend/src/components/Instances/Common.tsx b/frontend/src/components/Instances/Common.tsx index 5086bad4b..dc8f2c3b7 100644 --- a/frontend/src/components/Instances/Common.tsx +++ b/frontend/src/components/Instances/Common.tsx @@ -1,8 +1,7 @@ import { Box, Link, Theme } from '@material-ui/core'; import Grid from '@material-ui/core/Grid'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import { makeStyles } from '@material-ui/styles'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { Link as RouterLink } from 'react-router-dom'; diff --git a/frontend/src/components/Instances/Details.tsx b/frontend/src/components/Instances/Details.tsx index 7a2b3dba3..21b5b5dbf 100644 --- a/frontend/src/components/Instances/Details.tsx +++ b/frontend/src/components/Instances/Details.tsx @@ -14,13 +14,13 @@ import Divider from '@material-ui/core/Divider'; import Grid from '@material-ui/core/Grid'; import Link from '@material-ui/core/Link'; import Paper from '@material-ui/core/Paper'; +import { makeStyles, useTheme } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; import Typography from '@material-ui/core/Typography'; -import { makeStyles, useTheme } from '@material-ui/styles'; import { Field, Form, Formik, FormikHelpers, FormikProps } from 'formik'; import { TextField } from 'formik-material-ui'; import React from 'react'; @@ -97,6 +97,10 @@ function StatusLabel(props: StatusLabelProps) { const { status, activated } = props; const { label = t('frequent|Unknown') } = (status && statusDefs[status.type]) || {}; + if (typeof label === 'object' && label !== null) { + throw new Error('Translation key returned an object, which is not supported.'); + } + return ( {/* If there is no onClick passed to it, then we're not a button */} diff --git a/frontend/src/components/Instances/List.tsx b/frontend/src/components/Instances/List.tsx index 5d871713c..8e3d9cd65 100644 --- a/frontend/src/components/Instances/List.tsx +++ b/frontend/src/components/Instances/List.tsx @@ -13,8 +13,8 @@ import InputLabel from '@material-ui/core/InputLabel'; import MenuItem from '@material-ui/core/MenuItem'; import Paper from '@material-ui/core/Paper'; import Select from '@material-ui/core/Select'; +import { useTheme } from '@material-ui/core/styles'; import TablePagination from '@material-ui/core/TablePagination'; -import { useTheme } from '@material-ui/styles'; import PropTypes from 'prop-types'; import React, { ChangeEvent } from 'react'; import { useTranslation } from 'react-i18next'; diff --git a/frontend/src/components/Instances/StatusHistoryList.tsx b/frontend/src/components/Instances/StatusHistoryList.tsx index d52f7976b..332e0853c 100644 --- a/frontend/src/components/Instances/StatusHistoryList.tsx +++ b/frontend/src/components/Instances/StatusHistoryList.tsx @@ -1,10 +1,9 @@ -import { makeStyles } from '@material-ui/core'; +import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableHead from '@material-ui/core/TableHead'; import TableRow from '@material-ui/core/TableRow'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import { InstanceStatusHistory } from '../../api/apiDataTypes'; import StatusHistoryItem from './StatusHistoryItem'; diff --git a/frontend/src/components/Packages/Item.tsx b/frontend/src/components/Packages/Item.tsx index dc5fb83e9..971c2570c 100644 --- a/frontend/src/components/Packages/Item.tsx +++ b/frontend/src/components/Packages/Item.tsx @@ -6,10 +6,9 @@ import ListItem from '@material-ui/core/ListItem'; import ListItemIcon from '@material-ui/core/ListItemIcon'; import ListItemSecondaryAction from '@material-ui/core/ListItemSecondaryAction'; import ListItemText from '@material-ui/core/ListItemText'; +import { makeStyles } from '@material-ui/core/styles'; import Typography from '@material-ui/core/Typography'; -import makeStyles from '@material-ui/styles/makeStyles'; import PropTypes from 'prop-types'; -import React from 'react'; import { useTranslation } from 'react-i18next'; import _ from 'underscore'; import { Channel, Package } from '../../api/apiDataTypes'; diff --git a/frontend/src/components/common/ColorPicker/ColorPicker.tsx b/frontend/src/components/common/ColorPicker/ColorPicker.tsx index d81d8e356..0d08c2ede 100644 --- a/frontend/src/components/common/ColorPicker/ColorPicker.tsx +++ b/frontend/src/components/common/ColorPicker/ColorPicker.tsx @@ -1,6 +1,6 @@ import IconButton from '@material-ui/core/IconButton'; import Popover from '@material-ui/core/Popover'; -import { makeStyles } from '@material-ui/styles'; +import { makeStyles } from '@material-ui/core/styles'; import React from 'react'; import { TwitterPicker } from 'react-color'; import ChannelAvatar from '../../Channels/ChannelAvatar'; diff --git a/frontend/src/components/common/SectionPaper/SectionPaper.tsx b/frontend/src/components/common/SectionPaper/SectionPaper.tsx index f6726db67..6e45e0f2a 100644 --- a/frontend/src/components/common/SectionPaper/SectionPaper.tsx +++ b/frontend/src/components/common/SectionPaper/SectionPaper.tsx @@ -1,5 +1,5 @@ import Paper from '@material-ui/core/Paper'; -import { styled } from '@material-ui/styles'; +import { styled } from '@material-ui/core/styles'; const SectionPaper = styled(Paper)({ padding: '1em', diff --git a/frontend/src/components/common/VersionBreakdownBar/VersionBreakdownBar.tsx b/frontend/src/components/common/VersionBreakdownBar/VersionBreakdownBar.tsx index 5fc2df332..1921c5c16 100644 --- a/frontend/src/components/common/VersionBreakdownBar/VersionBreakdownBar.tsx +++ b/frontend/src/components/common/VersionBreakdownBar/VersionBreakdownBar.tsx @@ -1,10 +1,10 @@ import Paper from '@material-ui/core/Paper'; import { makeStyles, Theme } from '@material-ui/core/styles'; +import { useTheme } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableRow from '@material-ui/core/TableRow'; -import { useTheme } from '@material-ui/styles'; import React from 'react'; import { useTranslation } from 'react-i18next'; import { Bar, BarChart, ResponsiveContainer, Tooltip, XAxis, YAxis } from 'recharts'; diff --git a/frontend/src/i18n/ThemeProviderNexti18n.tsx b/frontend/src/i18n/ThemeProviderNexti18n.tsx index 972738b4b..ef97fd315 100644 --- a/frontend/src/i18n/ThemeProviderNexti18n.tsx +++ b/frontend/src/i18n/ThemeProviderNexti18n.tsx @@ -19,7 +19,9 @@ function getLocale(locale: string): typeof enUS { /** Like a ThemeProvider but uses reacti18next for the language selection * Because Material UI is localized as well. */ -const ThemeProviderNexti18n: React.FunctionComponent<{ theme: Theme }> = props => { +const ThemeProviderNexti18n: React.FunctionComponent< + React.PropsWithChildren<{ theme: Theme }> +> = props => { const { i18n } = useTranslation(); const [lang, setLang] = useState(i18n.language);