Release 2024-38

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-chart-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: {

env/platform.env.example

@@ -0,0 +1,4 @@
+TUPAIA_FRONT_END_URL=
+DATATRAK_FRONT_END_URL=
+LESMIS_FRONT_END_URL=
+ADMIN_PANEL_FRONT_END_URL=

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/admin-panel-server/package.json

@@ -43,7 +43,7 @@
     "lodash": "^4.17.4",
     "multer": "^1.4.3",
     "winston": "^3.3.3",
-    "xlsx": "^0.10.9"
+    "xlsx": "^0.18.5"
   },
   "devDependencies": {
     "@types/multer": "^1.4.7"

packages/admin-panel/package.json

@@ -31,6 +31,8 @@
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "^4.0.0-alpha.47",
     "@material-ui/styles": "^4.9.10",
+    "@tanstack/react-query": "4.36.1",
+    "@tanstack/react-query-devtools": "4.36.1",
     "@tupaia/access-policy": "workspace:*",
     "@tupaia/types": "workspace:*",
     "@tupaia/ui-chart-components": "workspace:*",
@@ -64,7 +66,6 @@
     "react-hook-form": "^6.8.3",
     "react-icons": "^2.2.7",
     "react-password-strength-bar": "^0.3.2",
-    "react-query": "^3.19.0",
     "react-redux": "^5.0.6",
     "react-router": "6.3.0",
     "react-router-dom": "6.3.0",

packages/admin-panel/src/VizBuilderApp/api/mutations/useExportDashboardVisualisation.js

@@ -1,9 +1,9 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { download } from '../api';
 
 export const useExportDashboardVisualisation = config =>

packages/admin-panel/src/VizBuilderApp/api/mutations/useExportMapOverlayVisualisation.js

@@ -1,9 +1,9 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { download } from '../api';
 
 export const useExportMapOverlayVisualisation = config =>

packages/admin-panel/src/VizBuilderApp/api/mutations/useSaveDashboardVisualisation.js

@@ -1,9 +1,9 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 20211Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  *
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post, put } from '../api';
 
 export const useSaveDashboardVisualisation = config =>

packages/admin-panel/src/VizBuilderApp/api/mutations/useSaveMapOverlayVisualisation.js

@@ -1,9 +1,9 @@
 /*
  * Tupaia
- * Copyright (c) 2017 - 20211Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  *
  */
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { post, put } from '../api';
 
 export const useSaveMapOverlayVisualisation = config =>

packages/admin-panel/src/VizBuilderApp/api/mutations/useUploadTestData.js

@@ -1,13 +1,13 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useMutation } from 'react-query';
+import { useMutation } from '@tanstack/react-query';
 import { upload } from '../api';
 
 // Must match the file name expected by the back-end
 const FILE_NAME = 'testData';
 
 export const useUploadTestData = () =>
-  useMutation('uploadTestData', file => upload('uploadTestData', {}, FILE_NAME, file));
+  useMutation(['uploadTestData'], file => upload('uploadTestData', {}, FILE_NAME, file));

packages/admin-panel/src/VizBuilderApp/api/queries/useCountries.js

@@ -1,8 +1,8 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { get } from '../api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../constants';
 

packages/admin-panel/src/VizBuilderApp/api/queries/useDashboardVisualisation.js

@@ -1,9 +1,9 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { get } from '../api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../constants';
 

packages/admin-panel/src/VizBuilderApp/api/queries/useEntities.js

@@ -1,8 +1,8 @@
 /**
  * Tupaia
- * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import { stringifyQuery } from '@tupaia/utils';
 import { get } from '../api';
 import { DEFAULT_REACT_QUERY_OPTIONS } from '../constants';

packages/admin-panel/src/VizBuilderApp/api/queries/useLocations.js

@@ -1,9 +1,9 @@
 /*
  * Tupaia
- *  Copyright (c) 2017 - 2021 Beyond Essential Systems Pty Ltd
+ *  Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
  */
 import { useEffect } from 'react';
-import { useQuery } from 'react-query';
+import { useQuery } from '@tanstack/react-query';
 import debounce from 'lodash.debounce';
 
 import { get } from '../api';