deps(uiComponents): RN-1417: Update storybook version PART 4

packages/psss/src/components/DateToolbar/DateToolbar.jsx

@@ -13,7 +13,7 @@ import ChevronRightIcon from '@material-ui/icons/ChevronRight';
 import ChevronLeftIcon from '@material-ui/icons/ChevronLeft';
 import CalendarTodayIcon from '@material-ui/icons/CalendarToday';
 import styled from 'styled-components';
-import { BaseToolbar, LightIconButton, SmallButton } from '@tupaia/ui-components';
+import { LightIconButton, SmallButton } from '@tupaia/ui-components';
 import { FlexStart, FlexEnd, FlexSpaceBetween } from '../Layout';
 import { WeekPicker } from './WeekPicker';
 import { MIN_DATE } from '../../constants';
@@ -28,6 +28,7 @@ import {
   subtractWeeksFromPeriod,
 } from '../../utils';
 import { getLatestViewableWeek, setLatestViewableWeek } from '../../store';
+import { BaseToolbar } from '../Toolbar';
 
 const Container = styled(FlexSpaceBetween)`
   width: 66%;
@@ -42,7 +43,9 @@ const Container = styled(FlexSpaceBetween)`
 const StyledButton = styled(SmallButton)`
   background-color: rgba(0, 0, 0, 0.15);
   color: rgba(255, 255, 255, 0.8);
-  transition: color 0.2s ease, background-color 0.2s ease;
+  transition:
+    color 0.2s ease,
+    background-color 0.2s ease;
 
   &.Mui-disabled {
     opacity: 0.8;

packages/ui-components/src/components/Tabs.tsx → packages/psss/src/components/Tabs.jsx

@@ -1,10 +1,10 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { useState, useCallback } from 'react';
-import MuiTabs, { TabsProps } from '@material-ui/core/Tabs';
+import MuiTabs from '@material-ui/core/Tabs';
 import MuiTab from '@material-ui/core/Tab';
 import styled from 'styled-components';
 
@@ -17,10 +17,10 @@ export const StyledTabs = styled(MuiTabs)`
   }
 `;
 
-export const Tabs = (props: TabsProps) => {
+export const Tabs = props => {
   const [value, setValue] = useState(0);
   const handleChange = useCallback(
-    (event: React.ChangeEvent<{}>, newValue: number) => {
+    (event, newValue) => {
       setValue(newValue);
     },
     [setValue],

packages/ui-components/src/components/Toolbar.tsx → packages/psss/src/components/Toolbar.jsx

@@ -1,11 +1,12 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 import React, { ReactNode } from 'react';
 import styled from 'styled-components';
-import Container, { ContainerProps } from '@material-ui/core/Container';
+import PropTypes from 'prop-types';
+import Container from '@material-ui/core/Container';
 import { Link as RouterLink, useLocation } from 'react-router-dom';
 import { LightTab, LightTabs } from './Tabs';
 
@@ -21,17 +22,17 @@ const ToolbarWrapper = styled.div`
   }
 `;
 
-interface BaseToolbarProps {
-  maxWidth?: ContainerProps['maxWidth'];
-  children?: ReactNode;
-}
-
-export const BaseToolbar = ({ children, maxWidth = false }: BaseToolbarProps) => (
+export const BaseToolbar = ({ children, maxWidth = false }) => (
   <ToolbarWrapper>
-    <Container maxWidth={maxWidth}>{children!}</Container>
+    <Container maxWidth={maxWidth}>{children}</Container>
   </ToolbarWrapper>
 );
 
+BaseToolbar.propTypes = {
+  children: PropTypes.node.isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+};
+
 const ToolbarTab = styled(LightTab)`
   font-size: 1.125rem;
   height: ${toolbarHeight};
@@ -48,21 +49,7 @@ const ToolbarTab = styled(LightTab)`
  * a component for navigating to router links
  */
 
-interface Link {
-  label: string;
-  to: string;
-  exact?: boolean;
-  icon?: ReactNode;
-  id?: string;
-}
-
-interface TabsToolbarProps {
-  links: Link[];
-  maxWidth?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | false | undefined;
-  baseRoute: string;
-}
-
-export const TabsToolbar = ({ links: linkInput, maxWidth, baseRoute }: TabsToolbarProps) => {
+export const TabsToolbar = ({ links: linkInput, maxWidth, baseRoute }) => {
   const location = useLocation();
   const links = linkInput.map(link => ({
     ...link,
@@ -85,3 +72,16 @@ export const TabsToolbar = ({ links: linkInput, maxWidth, baseRoute }: TabsToolb
     </BaseToolbar>
   );
 };
+
+TabsToolbar.propTypes = {
+  links: PropTypes.arrayOf(
+    PropTypes.shape({
+      label: PropTypes.string.isRequired,
+      to: PropTypes.string.isRequired,
+      exact: PropTypes.bool,
+      icon: PropTypes.node,
+    }),
+  ).isRequired,
+  maxWidth: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
+  baseRoute: PropTypes.string.isRequired,
+};

packages/psss/src/components/index.js

@@ -17,3 +17,5 @@ export * from './FetchLoader';
 export * from './Modal';
 export * from './AffectedSitesTab';
 export * from './ComingSoon';
+export * from './Tabs';
+export * from './Toolbar';

packages/psss/src/containers/NavBar.jsx

@@ -8,10 +8,11 @@ import { connect } from 'react-redux';
 import MuiContainer from '@material-ui/core/Container';
 import styled from 'styled-components';
 import { NavLink } from 'react-router-dom';
-import { Dashboard, HomeButton, LightTab, WarningCloud } from '@tupaia/ui-components';
+import { Dashboard, HomeButton, WarningCloud } from '@tupaia/ui-components';
 import PropTypes from 'prop-types';
 import { ProfileButton } from './ProfileButton';
 import { checkIsMultiCountryUser, getCountryCodes, getHomeUrl } from '../store';
+import { LightTab } from '../components';
 
 const Wrapper = styled.nav`
   position: relative;

packages/psss/src/views/AlertsOutbreaksView.jsx

@@ -6,9 +6,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import { connect, useSelector } from 'react-redux';
 import { useLocation, useRouteMatch } from 'react-router-dom';
-import { WarningCloud, TabsToolbar, Virus } from '@tupaia/ui-components';
+import { WarningCloud, Virus } from '@tupaia/ui-components';
 import { Archive } from '@material-ui/icons';
-import { Header, HeaderTitle, HeaderTitleWithSubHeading } from '../components';
+import { Header, HeaderTitle, HeaderTitleWithSubHeading, TabsToolbar } from '../components';
 import { AlertsExportModal, OutbreaksExportModal } from '../containers/Modals';
 import { AlertRoutes } from '../routes/AlertRoutes';
 import { getCountryCodes, getCountryName } from '../store';

packages/psss/src/views/CountryReportsView.jsx

@@ -7,8 +7,8 @@ import { PhotoAlbum } from '@material-ui/icons';
 import { connect, useSelector } from 'react-redux';
 import PropTypes from 'prop-types';
 import { useParams, useRouteMatch } from 'react-router-dom';
-import { TabsToolbar, CalendarToday } from '@tupaia/ui-components';
-import { Header, HeaderAvatarTitle } from '../components';
+import { CalendarToday } from '@tupaia/ui-components';
+import { Header, HeaderAvatarTitle, TabsToolbar } from '../components';
 import { WeeklyReportsExportModal } from '../containers/Modals';
 import { CountryRoutes } from '../routes/CountryRoutes';
 import { countryFlagImage } from '../utils';

packages/psss/src/views/ProfileView.jsx

@@ -9,8 +9,7 @@ import PropTypes from 'prop-types';
 import AccountCircleIcon from '@material-ui/icons/AccountCircle';
 import LockIcon from '@material-ui/icons/Lock';
 import { useRouteMatch } from 'react-router-dom';
-import { TabsToolbar } from '@tupaia/ui-components';
-import { Header, HeaderTitle } from '../components';
+import { Header, HeaderTitle, TabsToolbar } from '../components';
 import { ProfileRoutes } from '../routes/ProfileRoutes';
 import { getCurrentUser } from '../store';
 

packages/ui-components/.babelrc.js → packages/ui-components/babel.test.js

@@ -1,6 +1,6 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 const isTest = process.env.NODE_ENV === 'test';

packages/ui-components/helpers/AppProviders.js → packages/ui-components/helpers/AppProviders.tsx

@@ -7,10 +7,15 @@ import React from 'react';
 import { MuiThemeProvider, StylesProvider } from '@material-ui/core/styles';
 import { ThemeProvider } from 'styled-components';
 import CssBaseline from '@material-ui/core/CssBaseline';
-import PropTypes from 'prop-types';
 import { lightTheme, darkTheme } from '../stories/story-utils/theme';
 
-export const AppProviders = ({ params, children }) => {
+export const AppProviders = ({
+  params,
+  children,
+}: {
+  params?: { theme: 'dark' | 'light' };
+  children: React.ReactNode;
+}) => {
   const theme = params?.theme === 'dark' ? darkTheme : lightTheme;
   return (
     <StylesProvider injectFirst>
@@ -23,12 +28,3 @@ export const AppProviders = ({ params, children }) => {
     </StylesProvider>
   );
 };
-
-AppProviders.propTypes = {
-  params: PropTypes.object,
-  children: PropTypes.any.isRequired,
-};
-
-AppProviders.defaultProps = {
-  params: null,
-};