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

.storybook/AppProviders.tsx

@@ -0,0 +1,31 @@
+/*
+ * Tupaia
+ * 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 { lightTheme, darkTheme } from './theme';
+
+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}>
+        <ThemeProvider theme={theme}>
+          <CssBaseline />
+          {children}
+        </ThemeProvider>
+      </MuiThemeProvider>
+    </StylesProvider>
+  );
+};

.storybook/ReactHookFormDecorator.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import { ReactNode } from 'react';
+import { FormProvider, useForm } from 'react-hook-form';
+import { Args } from '@storybook/react';
+import { DecoratorFunction } from '@storybook/csf';
+
+const StorybookFormProvider = ({ children }: { children: ReactNode }) => {
+  const formContext = useForm();
+  return (
+    <FormProvider {...formContext}>
+      <form>{children}</form>
+    </FormProvider>
+  );
+};
+
+const ReactHookFormDecorator: DecoratorFunction<any, Args> = (Story, context) => (
+  <StorybookFormProvider>
+    <Story {...context} />
+  </StorybookFormProvider>
+);
+
+export default ReactHookFormDecorator;

.storybook/ReactRouterDecorator.tsx

@@ -0,0 +1,27 @@
+import React, { useEffect } from 'react';
+import { action } from '@storybook/addon-actions';
+import { BrowserRouter, useLocation } from 'react-router-dom';
+import { Args } from '@storybook/react';
+import { DecoratorFunction } from '@storybook/csf';
+
+const LocationChangeAction = ({ children }) => {
+  const location = useLocation();
+
+  useEffect(() => {
+    if (location.key !== 'default') action('React Router Location Change')(location);
+  }, [location]);
+
+  return <>{children}</>;
+};
+
+const ReactRouterDecorator: DecoratorFunction<any, Args> = (Story, context) => {
+  return (
+    <BrowserRouter>
+      <LocationChangeAction>
+        <Story {...context} />
+      </LocationChangeAction>
+    </BrowserRouter>
+  );
+};
+
+export default ReactRouterDecorator;

.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;

.storybook/preview-head.html

@@ -0,0 +1,16 @@
+<link
+  rel="stylesheet"
+  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" />
+
+<style>
+  html {
+    -webkit-font-smoothing: antialiased;
+    -moz-osx-font-smoothing: grayscale;
+  }
+  body {
+    font-family: Roboto, sans-serif;
+  }
+</style>

.storybook/preview.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import type { Preview } from '@storybook/react';
+import { AppProviders } from './AppProviders';
+import ReactRouterDecorator from './ReactRouterDecorator';
+import ReactHookFormDecorator from './ReactHookFormDecorator';
+
+const preview: Preview = {
+  parameters: {
+    backgrounds: {
+      default: 'Light',
+      values: [
+        { name: 'Dark', value: '#262834' },
+        { name: 'Light', value: '#ffffff' },
+      ],
+    },
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+  decorators: [
+    ReactRouterDecorator,
+    ReactHookFormDecorator,
+    (Story, { parameters }) => {
+      return (
+        <AppProviders params={parameters}>
+          <Story />
+        </AppProviders>
+      );
+    },
+  ],
+};
+
+export default preview;

.storybook/theme/colors.js

@@ -0,0 +1,36 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ */
+
+// Primary & Secondary colors
+export const WHITE = '#FFFFFF';
+export const BLACK = '#000000';
+export const BLUE = '#3884B8';
+export const DARK_BLUE = '#135D8F';
+export const YELLOW = '#FFCC24';
+export const RED = '#D13333';
+export const ORANGE = '#EF5A06';
+export const GREEN = '#02B851';
+export const DARKGREY = '#283238'; // dark background
+export const LIGHTGREY = '#F9F9F9'; // page background
+export const TEXT_DARKGREY = '#414D55';
+export const TEXT_MIDGREY = '#6F7B82';
+export const TEXT_LIGHTGREY = '#9AA8B0';
+
+// Greys (based on first 2 letters of hex code)
+export const GREY_72 = '#727D84';
+export const GREY_9F = '#9FA6AA';
+export const GREY_DE = '#DEDEE0'; // use for border colors of cards
+export const GREY_E2 = '#E2E2E2';
+export const GREY_F1 = '#F1F1F1';
+export const GREY_FB = '#FBF9F9';
+
+// Blues
+export const LIGHT_BLUE = '#99D6FF';
+
+// Reds
+export const LIGHT_RED = '#FEE2E2';
+
+// Greens
+export const DARK_GREEN = '#00972E';

.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',
+    },
+  },
+});

.storybook/theme/index.js

@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ */
+export * from './darkTheme';
+export * from './lightTheme';