deps(root): RN-1417: Update storybook version

packages/ui-map-components/.storybook/AppProviders.js → .storybook/AppProviders.tsx

@@ -1,17 +1,23 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
 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/theme';
+import { lightTheme, darkTheme } from './theme';
 
-export const AppProviders = ({ params, children }) => {
+export const AppProviders = ({
+  params,
+  children,
+}: {
+  params?: { theme?: 'light' | 'dark' };
+  children: React.ReactNode;
+}) => {
   const theme = params?.theme === 'dark' ? darkTheme : lightTheme;
+
   return (
     <StylesProvider injectFirst>
       <MuiThemeProvider theme={theme}>
@@ -23,12 +29,3 @@ export const AppProviders = ({ params, children }) => {
     </StylesProvider>
   );
 };
-
-AppProviders.propTypes = {
-  params: PropTypes.object,
-  children: PropTypes.any.isRequired,
-};
-
-AppProviders.defaultProps = {
-  params: null,
-};

packages/tupaia-web/.storybook/ReactHookFormDecorator.tsx → .storybook/ReactHookFormDecorator.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import { action } from '@storybook/addon-actions';
 import { ReactNode } from 'react';
 import { FormProvider, useForm } from 'react-hook-form';
 import { Args } from '@storybook/react';

.storybook/main.ts

@@ -0,0 +1,62 @@
+import fs from 'fs';
+import path, { join, dirname } from 'path';
+import type { StorybookConfig } from '@storybook/react-vite';
+
+const getStoriesDir = () => {
+  const currentDir = process.cwd();
+  return join(currentDir, 'stories/**/*.stories.@(js|jsx|ts|tsx)');
+};
+
+const getStaticDir = () => {
+  const currentDir = process.cwd();
+  const publicPath = join(currentDir, 'public');
+
+  if (!fs.existsSync(publicPath)) return [];
+  return [publicPath];
+};
+
+const config: StorybookConfig = {
+  stories: [getStoriesDir()],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+  typescript: {
+    reactDocgen: 'react-docgen-typescript',
+  },
+  core: {
+    builder: '@storybook/builder-vite',
+  },
+  staticDirs: getStaticDir(),
+  viteFinal: async (config, { configType }) => {
+    // Merge custom configuration into the default config
+    const { mergeConfig, loadEnv } = await import('vite');
+    // Load the environment variables, whether or not they are prefixed with REACT_APP_
+    const env = loadEnv(configType || 'DEVELOPMENT', process.cwd(), ['REACT_APP_', '']);
+
+    return mergeConfig(config, {
+      define: {
+        'process.env': env,
+      },
+      server: {
+        watch: {
+          // Ignore the .env files because for some reason vite is detecting changes in them and restarting the server multiple times
+          ignored: '**/.env*',
+        },
+      },
+      resolve: {
+        preserveSymlinks: true, // use the yarn workspace symlinks
+        alias: {
+          http: path.resolve(__dirname, '../moduleMock.js'),
+          winston: path.resolve(__dirname, '../moduleMock.js'),
+          jsonwebtoken: path.resolve(__dirname, '../moduleMock.js'),
+          'node-fetch': path.resolve(__dirname, '../moduleMock.js'),
+          // This is a workaround for us using react-16 in the monorepo
+          '@storybook/react-dom-shim': '@storybook/react-dom-shim/dist/react-16',
+        },
+      },
+    });
+  },
+};
+export default config;

packages/tupaia-web/.storybook/preview-head.html → .storybook/preview-head.html

@@ -3,10 +3,7 @@
   href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,600,700&display=swap"
 />
 
-<link
-  rel="stylesheet"
-  href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css"
-/>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.1.0/leaflet.css" />
 
 <style>
   html {

packages/tupaia-web/.storybook/preview.tsx → .storybook/preview.tsx

@@ -1,13 +1,13 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
-import { AppProviders } from '../src/AppProviders';
+import { AppProviders } from './AppProviders';
 import ReactRouterDecorator from './ReactRouterDecorator';
 import ReactHookFormDecorator from './ReactHookFormDecorator';
 
 const preview: Preview = {
   parameters: {
     backgrounds: {
-      default: 'Dark',
+      default: 'Light',
       values: [
         { name: 'Dark', value: '#262834' },
         { name: 'Light', value: '#ffffff' },
@@ -24,9 +24,9 @@ const preview: Preview = {
   decorators: [
     ReactRouterDecorator,
     ReactHookFormDecorator,
-    Story => {
+    (Story, { parameters }) => {
       return (
-        <AppProviders>
+        <AppProviders params={parameters}>
           <Story />
         </AppProviders>
       );

.storybook/theme/darkTheme.js

@@ -0,0 +1,29 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ *
+ */
+
+import { createMuiTheme } from '@material-ui/core';
+
+export const darkTheme = createMuiTheme({
+  palette: {
+    type: 'dark',
+    primary: {
+      main: '#1978D4', // Main blue (as seen on primary buttons)
+    },
+    secondary: {
+      main: '#ee6230',
+    },
+    background: {
+      default: '#262834', // Dark blue background
+      paper: '#262834', // Dark blue to match background
+    },
+    text: {
+      secondary: '#9ba0a6',
+    },
+    form: {
+      border: '#d9d9d9',
+    },
+  },
+});

packages/ui-map-components/stories/theme/lightTheme.js → .storybook/theme/lightTheme.js

@@ -9,6 +9,7 @@ import * as COLORS from './colors';
 
 const themeName = 'Tupaia-Storybook';
 const palette = {
+  type: 'light',
   primary: {
     main: COLORS.BLUE,
     light: COLORS.LIGHT_BLUE,
@@ -44,9 +45,12 @@ const palette = {
     600: COLORS.GREY_72,
   },
   background: {
-    default: 'transparent', // use background addon to switch colors
+    default: COLORS.WHITE,
     paper: COLORS.WHITE,
   },
+  form: {
+    border: COLORS.GREY_DE,
+  },
 };
 const typography = {
   h1: {

package.json

@@ -44,28 +44,34 @@
     "package:test:withdb": "cd $INIT_CWD && yarn workspace @tupaia/database check-test-database-exists && jest --runInBand",
     "package:start:backend-start-dev": "cd $INIT_CWD && LOG_LEVEL=debug ../../scripts/bash/backendStartDev.sh",
     "package:start:vite": "cd $INIT_CWD && vite --config \"../../vite.config.js\"",
-    "package:start-stack": "scripts/bash/pm2startInline.sh"
+    "package:start-stack": "scripts/bash/pm2startInline.sh",
+    "package:storybook:start": "cd $INIT_CWD && storybook dev -p 6006 -c ../../.storybook",
+    "package:storybook:build": "cd $INIT_CWD && storybook build -c .storybook"
   },
   "resolutions": {
     "@typescript-eslint/eslint-plugin": "^4.18.0",
-    "@babel/types": "7.23.3"
+    "@babel/types": "7.25.6"
   },
   "devDependencies": {
-    "@babel/cli": "^7.11.6",
-    "@babel/core": "^7.23.3",
-    "@babel/node": "^7.10.5",
+    "@babel/cli": "^7.25.6",
+    "@babel/core": "^7.25.2",
+    "@babel/node": "^7.25.0",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
-    "@babel/plugin-proposal-export-default-from": "^7.22.17",
+    "@babel/plugin-proposal-export-default-from": "^7.24.7",
     "@babel/plugin-proposal-object-rest-spread": "^7.20.7",
     "@babel/plugin-proposal-private-methods": "^7.18.6",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-runtime": "^7.18.10",
-    "@babel/preset-env": "^7.23.3",
-    "@babel/preset-react": "^7.23.3",
-    "@babel/types": "^7.23.0",
+    "@babel/plugin-transform-runtime": "^7.25.4",
+    "@babel/preset-env": "^7.25.4",
+    "@babel/preset-react": "^7.24.7",
+    "@babel/types": "^7.25.6",
     "@beyondessential/eslint-config-jest": "^1.0.0",
     "@beyondessential/eslint-config-js": "^1.1.1",
     "@beyondessential/eslint-config-ts": "^2.0.0",
+    "@storybook/addon-essentials": "^8.2.9",
+    "@storybook/builder-vite": "^8.2.9",
+    "@storybook/react": "^8.2.9",
+    "@storybook/react-vite": "^8.2.9",
     "@vitejs/plugin-react": "^4.0.4",
     "babel-eslint": "^10.1.0",
     "babel-jest": "^29.7.0",
@@ -84,6 +90,8 @@
     "nodemon": "^2.0.4",
     "npm-package-json-lint": "5.1.0",
     "pm2": "^5.3.0",
+    "react-docgen-typescript-plugin": "^1.0.8",
+    "storybook": "^8.2.9",
     "ts-jest": "^29.1.2",
     "ts-node": "^10.7.0",
     "typescript": "^5.2.2",

packages/api-client/package.json

@@ -27,5 +27,8 @@
     "lodash.pick": "^4.4.0",
     "node-fetch": "^1.7.3",
     "qs": "^6.12.0"
+  },
+  "devDependencies": {
+    "@types/node-fetch": "^2.6.11"
   }
 }

packages/datatrak-web/package.json

@@ -15,7 +15,6 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.57",
     "@material-ui/styles": "^4.9.10",
-    "@testing-library/react-hooks": "^8.0.1",
     "@tupaia/expression-parser": "workspace:*",
     "@tupaia/types": "workspace:*",
     "@tupaia/ui-components": "workspace:*",
@@ -42,6 +41,8 @@
   "devDependencies": {
     "@mui/types": "^7.2.4",
     "@testing-library/react": "12.1.2",
+    "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^13.5.0",
     "@types/leaflet": "^1.7.1",
     "@types/material-ui": "^0.21.12",
     "@types/react": "16.8.6",

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],