From 8745ef0c4afd9b0d1736e43a1fe4a363fea44fdc Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Fri, 6 Sep 2024 10:14:14 +1200
Subject: [PATCH 1/2] ui components storybook
---
.storybook/main.ts | 6 +
.../components/DateToolbar/DateToolbar.jsx | 7 +-
.../Tabs.tsx => psss/src/components/Tabs.jsx} | 8 +-
.../src/components/Toolbar.jsx} | 48 +-
packages/psss/src/components/index.js | 2 +
packages/psss/src/containers/NavBar.jsx | 3 +-
.../psss/src/views/AlertsOutbreaksView.jsx | 4 +-
.../psss/src/views/CountryReportsView.jsx | 4 +-
packages/psss/src/views/ProfileView.jsx | 3 +-
packages/ui-components/.babelrc.js | 42 -
.../.storybook/ReactHookFormDecorator.js | 19 -
.../.storybook/ReactRouterDecorator.js | 25 -
.../ui-components/.storybook/awsModuleMock.js | 12 -
packages/ui-components/.storybook/main.js | 8 -
.../ui-components/.storybook/moduleMock.js | 5 -
.../.storybook/preview-head.html | 7 -
packages/ui-components/.storybook/preview.js | 28 -
.../.storybook/webpack.config.js | 54 --
.../ui-components/helpers/RouterProvider.js | 9 -
packages/ui-components/package.json | 9 +-
.../src/components/Breadcrumbs.tsx | 111 ---
.../ui-components/src/components/index.ts | 3 -
...enu.stories.js => actionsMenu.stories.jsx} | 0
.../{alert.stories.js => alert.stories.jsx} | 0
.../stories/breadcrumbs.stories.js | 68 --
.../{button.stories.js => button.stories.jsx} | 0
.../{card.stories.js => card.stories.jsx} | 0
...rdTabs.stories.js => cardTabs.stories.jsx} | 0
...stories.js => dateRangePicker.stories.jsx} | 0
.../{dialog.stories.js => dialog.stories.jsx} | 0
...ries.js => forgotPasswordForm.stories.jsx} | 0
...nForm.stories.js => loginForm.stories.jsx} | 0
...rm.stories.js => registerForm.stories.jsx} | 0
...> resendVerificationEmailForm.stories.jsx} | 0
...ories.js => resetPasswordForm.stories.jsx} | 0
....stories.js => horizontalTree.stories.jsx} | 0
.../{icon.stories.js => icon.stories.jsx} | 0
...tton.stories.js => iconbutton.stories.jsx} | 0
...ories.js => asyncAutocomplete.stories.jsx} | 0
...te.stories.js => autocomplete.stories.jsx} | 0
...ct.stories.js => buttonSelect.stories.jsx} | 0
...eckbox.stories.js => checkbox.stories.jsx} | 0
...st.stories.js => checkboxList.stories.jsx} | 0
...cker.stories.js => datePicker.stories.jsx} | 0
...stories.js => fileUploadField.stories.jsx} | 0
...t.stories.js => groupedSelect.stories.jsx} | 0
...ld.stories.js => hexcodeField.stories.jsx} | 0
...tories.js => imageUploadField.stories.jsx} | 0
...roup.stories.js => inputGroup.stories.jsx} | 0
...abel.stories.js => inputLabel.stories.jsx} | 0
...ect.stories.js => multiSelect.stories.jsx} | 0
...roup.stories.js => radioGroup.stories.jsx} | 0
.../{select.stories.js => select.stories.jsx} | 0
...Field.stories.js => textField.stories.jsx} | 0
.../{matrix.stories.js => matrix.stories.jsx} | 0
.../{meter.stories.js => meter.stories.jsx} | 0
...palette.stories.js => palette.stories.jsx} | 0
...ies.js => passwordStrengthBar.stories.jsx} | 0
...n.stories.js => profileButton.stories.jsx} | 9 +-
...al.stories.js => qrCodeVisual.stories.jsx} | 0
...ton.stories.js => splitButton.stories.jsx} | 0
.../{TableCells.js => TableCells.jsx} | 0
.../api/{connectApi.js => connectApi.jsx} | 0
.../stories/story-utils/theme/darkTheme.js | 28 -
.../stories/story-utils/theme/index.js | 6 -
.../stories/story-utils/theme/lightTheme.js | 125 ---
...taGrid.stories.js => dataGrid.stories.jsx} | 0
...e.stories.js => editableTable.stories.jsx} | 0
...stories.js => expandableTable.stories.jsx} | 0
.../{table.stories.js => table.stories.jsx} | 0
.../ui-components/stories/tabs.stories.js | 59 --
.../{toast.stories.js => toast.stories.jsx} | 0
.../ui-components/stories/toolbar.stories.js | 36 -
...tooltip.stories.js => tooltip.stories.jsx} | 0
...aphy.stories.js => typography.stories.jsx} | 0
...age.stories.js => userMessage.stories.jsx} | 0
packages/ui-components/tsconfig.json | 4 +-
yarn.lock | 882 ++----------------
78 files changed, 113 insertions(+), 1521 deletions(-)
rename packages/{ui-components/src/components/Tabs.tsx => psss/src/components/Tabs.jsx} (85%)
rename packages/{ui-components/src/components/Toolbar.tsx => psss/src/components/Toolbar.jsx} (65%)
delete mode 100644 packages/ui-components/.babelrc.js
delete mode 100644 packages/ui-components/.storybook/ReactHookFormDecorator.js
delete mode 100644 packages/ui-components/.storybook/ReactRouterDecorator.js
delete mode 100644 packages/ui-components/.storybook/awsModuleMock.js
delete mode 100644 packages/ui-components/.storybook/main.js
delete mode 100644 packages/ui-components/.storybook/moduleMock.js
delete mode 100644 packages/ui-components/.storybook/preview-head.html
delete mode 100644 packages/ui-components/.storybook/preview.js
delete mode 100644 packages/ui-components/.storybook/webpack.config.js
delete mode 100644 packages/ui-components/helpers/RouterProvider.js
delete mode 100644 packages/ui-components/src/components/Breadcrumbs.tsx
rename packages/ui-components/stories/{actionsMenu.stories.js => actionsMenu.stories.jsx} (100%)
rename packages/ui-components/stories/{alert.stories.js => alert.stories.jsx} (100%)
delete mode 100644 packages/ui-components/stories/breadcrumbs.stories.js
rename packages/ui-components/stories/{button.stories.js => button.stories.jsx} (100%)
rename packages/ui-components/stories/{card.stories.js => card.stories.jsx} (100%)
rename packages/ui-components/stories/{cardTabs.stories.js => cardTabs.stories.jsx} (100%)
rename packages/ui-components/stories/{dateRangePicker.stories.js => dateRangePicker.stories.jsx} (100%)
rename packages/ui-components/stories/{dialog.stories.js => dialog.stories.jsx} (100%)
rename packages/ui-components/stories/features/{forgotPasswordForm.stories.js => forgotPasswordForm.stories.jsx} (100%)
rename packages/ui-components/stories/features/{loginForm.stories.js => loginForm.stories.jsx} (100%)
rename packages/ui-components/stories/features/{registerForm.stories.js => registerForm.stories.jsx} (100%)
rename packages/ui-components/stories/features/{resendVerificationEmailForm.stories.js => resendVerificationEmailForm.stories.jsx} (100%)
rename packages/ui-components/stories/features/{resetPasswordForm.stories.js => resetPasswordForm.stories.jsx} (100%)
rename packages/ui-components/stories/{horizontalTree.stories.js => horizontalTree.stories.jsx} (100%)
rename packages/ui-components/stories/{icon.stories.js => icon.stories.jsx} (100%)
rename packages/ui-components/stories/{iconbutton.stories.js => iconbutton.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{asyncAutocomplete.stories.js => asyncAutocomplete.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{autocomplete.stories.js => autocomplete.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{buttonSelect.stories.js => buttonSelect.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{checkbox.stories.js => checkbox.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{checkboxList.stories.js => checkboxList.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{datePicker.stories.js => datePicker.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{fileUploadField.stories.js => fileUploadField.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{groupedSelect.stories.js => groupedSelect.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{hexcodeField.stories.js => hexcodeField.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{imageUploadField.stories.js => imageUploadField.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{inputGroup.stories.js => inputGroup.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{inputLabel.stories.js => inputLabel.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{multiSelect.stories.js => multiSelect.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{radioGroup.stories.js => radioGroup.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{select.stories.js => select.stories.jsx} (100%)
rename packages/ui-components/stories/inputs/{textField.stories.js => textField.stories.jsx} (100%)
rename packages/ui-components/stories/{matrix.stories.js => matrix.stories.jsx} (100%)
rename packages/ui-components/stories/{meter.stories.js => meter.stories.jsx} (100%)
rename packages/ui-components/stories/{palette.stories.js => palette.stories.jsx} (100%)
rename packages/ui-components/stories/{passwordStrengthBar.stories.js => passwordStrengthBar.stories.jsx} (100%)
rename packages/ui-components/stories/{profileButton.stories.js => profileButton.stories.jsx} (86%)
rename packages/ui-components/stories/{qrCodeVisual.stories.js => qrCodeVisual.stories.jsx} (100%)
rename packages/ui-components/stories/{splitButton.stories.js => splitButton.stories.jsx} (100%)
rename packages/ui-components/stories/story-utils/{TableCells.js => TableCells.jsx} (100%)
rename packages/ui-components/stories/story-utils/api/{connectApi.js => connectApi.jsx} (100%)
delete mode 100644 packages/ui-components/stories/story-utils/theme/darkTheme.js
delete mode 100644 packages/ui-components/stories/story-utils/theme/index.js
delete mode 100644 packages/ui-components/stories/story-utils/theme/lightTheme.js
rename packages/ui-components/stories/tables/{dataGrid.stories.js => dataGrid.stories.jsx} (100%)
rename packages/ui-components/stories/tables/{editableTable.stories.js => editableTable.stories.jsx} (100%)
rename packages/ui-components/stories/tables/{expandableTable.stories.js => expandableTable.stories.jsx} (100%)
rename packages/ui-components/stories/tables/{table.stories.js => table.stories.jsx} (100%)
delete mode 100644 packages/ui-components/stories/tabs.stories.js
rename packages/ui-components/stories/{toast.stories.js => toast.stories.jsx} (100%)
delete mode 100644 packages/ui-components/stories/toolbar.stories.js
rename packages/ui-components/stories/{tooltip.stories.js => tooltip.stories.jsx} (100%)
rename packages/ui-components/stories/{typography.stories.js => typography.stories.jsx} (100%)
rename packages/ui-components/stories/{userMessage.stories.js => userMessage.stories.jsx} (100%)
diff --git a/.storybook/main.ts b/.storybook/main.ts
index ff5ace3de6..ae551335f1 100644
--- a/.storybook/main.ts
+++ b/.storybook/main.ts
@@ -39,6 +39,12 @@ const config: StorybookConfig = {
define: {
'process.env': env,
},
+ server: {
+ warmup: {
+ // warmup all .env files - this is a workaround for .env files triggering reload and causing [this error](https://github.com/vitejs/vite/issues/13735)
+ clientFiles: ['**/.env*'],
+ },
+ },
resolve: {
preserveSymlinks: true, // use the yarn workspace symlinks
alias: {
diff --git a/packages/psss/src/components/DateToolbar/DateToolbar.jsx b/packages/psss/src/components/DateToolbar/DateToolbar.jsx
index 03c67ab6f9..09a39dc3af 100644
--- a/packages/psss/src/components/DateToolbar/DateToolbar.jsx
+++ b/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;
diff --git a/packages/ui-components/src/components/Tabs.tsx b/packages/psss/src/components/Tabs.jsx
similarity index 85%
rename from packages/ui-components/src/components/Tabs.tsx
rename to packages/psss/src/components/Tabs.jsx
index a98a9942e9..59f775f145 100644
--- a/packages/ui-components/src/components/Tabs.tsx
+++ b/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],
diff --git a/packages/ui-components/src/components/Toolbar.tsx b/packages/psss/src/components/Toolbar.jsx
similarity index 65%
rename from packages/ui-components/src/components/Toolbar.tsx
rename to packages/psss/src/components/Toolbar.jsx
index 3881b5f749..898a6d9f5b 100644
--- a/packages/ui-components/src/components/Toolbar.tsx
+++ b/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 }) => (
- {children!}
+ {children}
);
+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
);
};
+
+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,
+};
diff --git a/packages/psss/src/components/index.js b/packages/psss/src/components/index.js
index 772b55918d..757a5a40a7 100644
--- a/packages/psss/src/components/index.js
+++ b/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';
diff --git a/packages/psss/src/containers/NavBar.jsx b/packages/psss/src/containers/NavBar.jsx
index 9fae40cefe..5e484b9075 100644
--- a/packages/psss/src/containers/NavBar.jsx
+++ b/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;
diff --git a/packages/psss/src/views/AlertsOutbreaksView.jsx b/packages/psss/src/views/AlertsOutbreaksView.jsx
index a5777b6f28..5ba50fe67c 100644
--- a/packages/psss/src/views/AlertsOutbreaksView.jsx
+++ b/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';
diff --git a/packages/psss/src/views/CountryReportsView.jsx b/packages/psss/src/views/CountryReportsView.jsx
index 8117e7462c..145e842dbc 100644
--- a/packages/psss/src/views/CountryReportsView.jsx
+++ b/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';
diff --git a/packages/psss/src/views/ProfileView.jsx b/packages/psss/src/views/ProfileView.jsx
index c48ec6c590..9a2335b197 100644
--- a/packages/psss/src/views/ProfileView.jsx
+++ b/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';
diff --git a/packages/ui-components/.babelrc.js b/packages/ui-components/.babelrc.js
deleted file mode 100644
index de16b6aea7..0000000000
--- a/packages/ui-components/.babelrc.js
+++ /dev/null
@@ -1,42 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-const isTest = process.env.NODE_ENV === 'test';
-
-module.exports = {
- presets: [
- [
- '@babel/preset-env',
- {
- targets: {
- node: 'current',
- },
- modules: isTest ? 'commonjs' : false,
- },
- ],
- '@babel/preset-react',
- ],
- plugins: [
- '@babel/plugin-proposal-object-rest-spread',
- [
- '@babel/plugin-proposal-class-properties',
- {
- loose: true,
- },
- ],
- [
- '@babel/plugin-proposal-private-property-in-object',
- {
- loose: true,
- },
- ],
- [
- '@babel/plugin-proposal-private-methods',
- {
- loose: true,
- },
- ],
- ],
-};
diff --git a/packages/ui-components/.storybook/ReactHookFormDecorator.js b/packages/ui-components/.storybook/ReactHookFormDecorator.js
deleted file mode 100644
index 3dbaf97b0f..0000000000
--- a/packages/ui-components/.storybook/ReactHookFormDecorator.js
+++ /dev/null
@@ -1,19 +0,0 @@
-import React from 'react';
-import { FormProvider, useForm } from 'react-hook-form';
-
-const StorybookFormProvider = ({ children }) => {
- const formContext = useForm();
- return (
-
-
-
- );
-};
-
-const ReactHookFormDecorator = (Story, context) => (
-
-
-
-);
-
-export default ReactHookFormDecorator;
diff --git a/packages/ui-components/.storybook/ReactRouterDecorator.js b/packages/ui-components/.storybook/ReactRouterDecorator.js
deleted file mode 100644
index 0fef1c4ef4..0000000000
--- a/packages/ui-components/.storybook/ReactRouterDecorator.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import React, { useEffect } from 'react';
-import { action } from '@storybook/addon-actions';
-import { BrowserRouter, useLocation } from 'react-router-dom';
-
-const LocationChangeAction = ({ children }) => {
- const location = useLocation();
-
- useEffect(() => {
- if (location.key !== 'default') action('React Router Location Change')(location);
- }, [location]);
-
- return <>{children};
-};
-
-const ReactRouterDecorator = (Story, context) => {
- return (
-
-
-
-
-
- );
-};
-
-export default ReactRouterDecorator;
diff --git a/packages/ui-components/.storybook/awsModuleMock.js b/packages/ui-components/.storybook/awsModuleMock.js
deleted file mode 100644
index 255e521a43..0000000000
--- a/packages/ui-components/.storybook/awsModuleMock.js
+++ /dev/null
@@ -1,12 +0,0 @@
-// mock implementation of `aws-sdk`, because `s3` folder within `@tupaia/utils` uses it but that
-// breaks storybook
-module.exports = {
- strict: () => {},
- Upload: () => ({
- done: async () => ({
- Location: 'testUrl',
- }),
- }),
- fromEnv: () => {},
- S3: () => {},
-};
diff --git a/packages/ui-components/.storybook/main.js b/packages/ui-components/.storybook/main.js
deleted file mode 100644
index aca7007334..0000000000
--- a/packages/ui-components/.storybook/main.js
+++ /dev/null
@@ -1,8 +0,0 @@
-// import the build chain webpack config and merge it with storybook config
-module.exports = {
- stories: ['../stories/**/*.stories.js', '../stories/**/*.stories.ts'],
- addons: ['@storybook/addon-essentials'],
- typescript: {
- reactDocgen: 'react-docgen-typescript-plugin',
- },
-};
diff --git a/packages/ui-components/.storybook/moduleMock.js b/packages/ui-components/.storybook/moduleMock.js
deleted file mode 100644
index 7f225744d0..0000000000
--- a/packages/ui-components/.storybook/moduleMock.js
+++ /dev/null
@@ -1,5 +0,0 @@
-// mock implementation of `yargs`, because `script.js` within `@tupaia/utils` uses it but that
-// breaks storybook
-module.exports = {
- strict: () => {},
-};
diff --git a/packages/ui-components/.storybook/preview-head.html b/packages/ui-components/.storybook/preview-head.html
deleted file mode 100644
index 1c868e3e2f..0000000000
--- a/packages/ui-components/.storybook/preview-head.html
+++ /dev/null
@@ -1,7 +0,0 @@
-
-
diff --git a/packages/ui-components/.storybook/preview.js b/packages/ui-components/.storybook/preview.js
deleted file mode 100644
index ed22d25897..0000000000
--- a/packages/ui-components/.storybook/preview.js
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from 'react';
-import { addDecorator } from '@storybook/react';
-import { AppProviders } from '../helpers/AppProviders';
-import ReactHookFormDecorator from './ReactHookFormDecorator';
-import ReactRouterDecorator from './ReactRouterDecorator';
-
-export const parameters = {
- backgrounds: {
- default: 'light',
- values: [
- {
- name: 'light',
- value: '#FFFFFF',
- },
- {
- name: 'dark',
- value: '#252934',
- },
- ],
- },
-};
-
-addDecorator((story, context) => (
- {story()}
-));
-
-addDecorator(ReactHookFormDecorator);
-addDecorator(ReactRouterDecorator);
diff --git a/packages/ui-components/.storybook/webpack.config.js b/packages/ui-components/.storybook/webpack.config.js
deleted file mode 100644
index 0bac24724a..0000000000
--- a/packages/ui-components/.storybook/webpack.config.js
+++ /dev/null
@@ -1,54 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
- */
-
-const path = require('path');
-
-/**
- * The doc doesn't really mention using webpack.config.js, but .storybook/main.js instead.
- *
- * Nevertheless, configuring the webpack.config.js seems to work fine.
- *
- * @param config
- * @return {Promise<*>}
- * @see https://storybook.js.org/docs/react/configure/webpack
- * @see https://storybook.js.org/docs/react/configure/webpack#using-your-existing-config
- */
-module.exports = async ({ config }) => {
- /**
- * Fixes npm packages that depend on `fs` module, etc.
- *
- * E.g: "winston" would fail to load without this, because it relies on fs, which isn't available during browser build.
- *
- * @see https://github.com/storybookjs/storybook/issues/4082#issuecomment-495370896
- */
- config.node = {
- fs: 'empty',
- tls: 'empty',
- net: 'empty',
- module: 'empty',
- console: true,
- };
-
- config.resolve.alias = {
- ...config.resolve.alias,
- yargs: path.resolve(__dirname, '../../../moduleMock.js'),
- child_process: path.resolve(__dirname, '../../../moduleMock.js'),
- '@aws-sdk/credential-providers': path.resolve(__dirname, 'awsModuleMock.js'),
- '@aws-sdk/client-s3': path.resolve(__dirname, 'awsModuleMock.js'),
- '@aws-sdk/lib-storage': path.resolve(__dirname, 'awsModuleMock.js'),
- };
-
- config.module.rules.push({
- test: /\.(js|jsx)$/,
- loader: require.resolve('babel-loader'),
- options: {
- presets: ['@babel/preset-env', '@babel/preset-react'],
- plugins: ['@babel/plugin-proposal-nullish-coalescing-operator'],
- },
- });
-
- return config;
-};
diff --git a/packages/ui-components/helpers/RouterProvider.js b/packages/ui-components/helpers/RouterProvider.js
deleted file mode 100644
index 4cb43dd341..0000000000
--- a/packages/ui-components/helpers/RouterProvider.js
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { BrowserRouter as Router } from 'react-router-dom';
-
-export const RouterProvider = ({ children }) => {children};
diff --git a/packages/ui-components/package.json b/packages/ui-components/package.json
index dc188e5bf7..8c7174f00f 100644
--- a/packages/ui-components/package.json
+++ b/packages/ui-components/package.json
@@ -17,10 +17,11 @@
"build-dev": "npm run build",
"lint": "yarn package:lint",
"lint:fix": "yarn lint --fix",
- "storybook": "start-storybook -s public -p 6006",
"test": "yarn package:test --env=jsdom",
"test:coverage": "yarn test --coverage",
- "test:watch": "yarn test --watch"
+ "test:watch": "yarn test --watch",
+ "start-storybook": "yarn package:storybook:start",
+ "build-storybook": "yarn package:storybook:build"
},
"dependencies": {
"@date-io/date-fns": "1.x",
@@ -55,8 +56,6 @@
"devDependencies": {
"@material-ui/styles": "^4.9.10",
"@mui/types": "^7.2.4",
- "@storybook/addon-essentials": "6.3.9",
- "@storybook/react": "^6.3.9",
"@testing-library/jest-dom": "^6.2.0",
"@types/downloadjs": "^1.4.3",
"@types/jest": "^29.5.1",
@@ -66,10 +65,8 @@
"@types/react-router-dom": "^5.3.3",
"@types/react-table": "^7.7.14",
"@types/styled-components": "^5.0.0",
- "babel-loader": "8.1.0",
"faker": "^4.1.0",
"fast-glob": "^3.2.5",
- "react-docgen-typescript-plugin": "^1.0.5",
"react-password-strength-bar": "^0.3.3"
}
}
diff --git a/packages/ui-components/src/components/Breadcrumbs.tsx b/packages/ui-components/src/components/Breadcrumbs.tsx
deleted file mode 100644
index b9b3abfcb8..0000000000
--- a/packages/ui-components/src/components/Breadcrumbs.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-import React, { useEffect, useState } from 'react';
-import MuiBreadcrumbs, {
- BreadcrumbsProps as MuiBreadcrumbsProps,
-} from '@material-ui/core/Breadcrumbs';
-import MuiLink, { LinkProps as MuiLinkProps } from '@material-ui/core/Link';
-import NavigateNextIcon from '@material-ui/icons/NavigateNext';
-import {
- LinkProps as ReactRouterLinkProps,
- Link as RouterLink,
- useLocation,
-} from 'react-router-dom';
-import styled from 'styled-components';
-import { Home as HomeIcon } from './Icons';
-
-const StyledBreadcrumbs = styled(MuiBreadcrumbs)`
- font-weight: 500;
- font-size: 0.75rem;
- line-height: 0.875rem;
- margin-top: 0.5rem;
- margin-bottom: 0.5rem;
- text-transform: capitalize;
-
- .MuiLink-root {
- display: flex;
- align-items: center;
-
- svg {
- font-size: 1rem;
- margin-right: 0.5rem;
- }
- }
-
- .MuiBreadcrumbs-separator {
- margin-left: 0;
- margin-right: 0;
-
- svg {
- font-size: 1rem;
- }
- }
-`;
-
-/**
- *
-This is a workaround for a typescript error that appears because of the 'component' props on Link. It is [a known issue]{@link https://github.com/mui/material-ui/issues/16846} with MUI v4, and is supposed to be fixed in MUI v5
-
- */
-const LinkRef = React.forwardRef((props, ref) => (
-
-));
-
-const Link = (props: MuiLinkProps & ReactRouterLinkProps) => (
-
-);
-
-/**
- * Breadcrumbs
- */
-
-interface BreadcrumbsProps extends MuiBreadcrumbsProps {
- home?: string;
-}
-
-export const Breadcrumbs = ({ home = 'Dashboard', ...props }: BreadcrumbsProps) => {
- const location = useLocation();
- const [pathnames, setPathnames] = useState([]);
-
- useEffect(() => {
- const newPathnames = location.pathname.split('/').filter(x => x);
- setPathnames(newPathnames);
- }, [location]);
-
- return (
- } {...props}>
-
- {home}
-
- {pathnames.map((value, index) => {
- const last = index === pathnames.length - 1;
- const to = `${pathnames.slice(0, index + 1).join('/')}`;
-
- return last ? (
- {value}
- ) : (
-
- {value}
-
- );
- })}
-
- );
-};
-
-/*
- * Light Breadcrumbs
- */
-export const LightBreadcrumbs = styled(Breadcrumbs)`
- color: ${props => props.theme.palette.secondary.light};
-
- svg {
- color: ${props => props.theme.palette.common.white};
- }
-
- a {
- color: ${props => props.theme.palette.common.white};
- }
-`;
diff --git a/packages/ui-components/src/components/index.ts b/packages/ui-components/src/components/index.ts
index c3a5dfd092..ceaaa522b8 100644
--- a/packages/ui-components/src/components/index.ts
+++ b/packages/ui-components/src/components/index.ts
@@ -7,7 +7,6 @@ export * from './ActionsMenu';
export * from './Alert';
export * from './Avatar';
export * from './BarMeter';
-export * from './Breadcrumbs';
export * from './Button';
export * from './Card';
export * from './CardTabs';
@@ -41,9 +40,7 @@ export * from './QrCode';
export * from './ReferenceTooltip';
export * from './SplitButton';
export * from './Table';
-export * from './Tabs';
export * from './Toast';
-export * from './Toolbar';
export * from './Tooltip';
export * from './UserMessage';
export * from './TooltipIconButton';
diff --git a/packages/ui-components/stories/actionsMenu.stories.js b/packages/ui-components/stories/actionsMenu.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/actionsMenu.stories.js
rename to packages/ui-components/stories/actionsMenu.stories.jsx
diff --git a/packages/ui-components/stories/alert.stories.js b/packages/ui-components/stories/alert.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/alert.stories.js
rename to packages/ui-components/stories/alert.stories.jsx
diff --git a/packages/ui-components/stories/breadcrumbs.stories.js b/packages/ui-components/stories/breadcrumbs.stories.js
deleted file mode 100644
index b786af5938..0000000000
--- a/packages/ui-components/stories/breadcrumbs.stories.js
+++ /dev/null
@@ -1,68 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import MuiBox from '@material-ui/core/Box';
-import { Link as RouterLink } from 'react-router-dom';
-import * as COLORS from './story-utils/theme/colors';
-import { RouterProvider } from '../helpers/RouterProvider';
-import { Breadcrumbs, LightBreadcrumbs, Tabs, Tab, LightTabs, LightTab } from '../src/components';
-
-const Container = styled(MuiBox)`
- max-width: 1200px;
- padding: 1rem;
-
- .MuiTabs-root {
- margin-top: 2rem;
- }
-`;
-
-export default {
- title: 'Breadcrumbs',
- decorators: [story => {story()}],
-};
-
-export const example = () => {
- return (
-
-
-
-
- Dashboard
-
-
- Outbreaks
-
-
- Alerts
-
-
- Alerts / Covid-19
-
-
-
- );
-};
-
-export const lightBreadcrumbs = () => (
-
-
-
-
- Dashboard
-
-
- Outbreaks
-
-
- Alerts
-
-
- Alerts / Covid-19
-
-
-
-);
diff --git a/packages/ui-components/stories/button.stories.js b/packages/ui-components/stories/button.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/button.stories.js
rename to packages/ui-components/stories/button.stories.jsx
diff --git a/packages/ui-components/stories/card.stories.js b/packages/ui-components/stories/card.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/card.stories.js
rename to packages/ui-components/stories/card.stories.jsx
diff --git a/packages/ui-components/stories/cardTabs.stories.js b/packages/ui-components/stories/cardTabs.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/cardTabs.stories.js
rename to packages/ui-components/stories/cardTabs.stories.jsx
diff --git a/packages/ui-components/stories/dateRangePicker.stories.js b/packages/ui-components/stories/dateRangePicker.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/dateRangePicker.stories.js
rename to packages/ui-components/stories/dateRangePicker.stories.jsx
diff --git a/packages/ui-components/stories/dialog.stories.js b/packages/ui-components/stories/dialog.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/dialog.stories.js
rename to packages/ui-components/stories/dialog.stories.jsx
diff --git a/packages/ui-components/stories/features/forgotPasswordForm.stories.js b/packages/ui-components/stories/features/forgotPasswordForm.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/features/forgotPasswordForm.stories.js
rename to packages/ui-components/stories/features/forgotPasswordForm.stories.jsx
diff --git a/packages/ui-components/stories/features/loginForm.stories.js b/packages/ui-components/stories/features/loginForm.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/features/loginForm.stories.js
rename to packages/ui-components/stories/features/loginForm.stories.jsx
diff --git a/packages/ui-components/stories/features/registerForm.stories.js b/packages/ui-components/stories/features/registerForm.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/features/registerForm.stories.js
rename to packages/ui-components/stories/features/registerForm.stories.jsx
diff --git a/packages/ui-components/stories/features/resendVerificationEmailForm.stories.js b/packages/ui-components/stories/features/resendVerificationEmailForm.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/features/resendVerificationEmailForm.stories.js
rename to packages/ui-components/stories/features/resendVerificationEmailForm.stories.jsx
diff --git a/packages/ui-components/stories/features/resetPasswordForm.stories.js b/packages/ui-components/stories/features/resetPasswordForm.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/features/resetPasswordForm.stories.js
rename to packages/ui-components/stories/features/resetPasswordForm.stories.jsx
diff --git a/packages/ui-components/stories/horizontalTree.stories.js b/packages/ui-components/stories/horizontalTree.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/horizontalTree.stories.js
rename to packages/ui-components/stories/horizontalTree.stories.jsx
diff --git a/packages/ui-components/stories/icon.stories.js b/packages/ui-components/stories/icon.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/icon.stories.js
rename to packages/ui-components/stories/icon.stories.jsx
diff --git a/packages/ui-components/stories/iconbutton.stories.js b/packages/ui-components/stories/iconbutton.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/iconbutton.stories.js
rename to packages/ui-components/stories/iconbutton.stories.jsx
diff --git a/packages/ui-components/stories/inputs/asyncAutocomplete.stories.js b/packages/ui-components/stories/inputs/asyncAutocomplete.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/asyncAutocomplete.stories.js
rename to packages/ui-components/stories/inputs/asyncAutocomplete.stories.jsx
diff --git a/packages/ui-components/stories/inputs/autocomplete.stories.js b/packages/ui-components/stories/inputs/autocomplete.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/autocomplete.stories.js
rename to packages/ui-components/stories/inputs/autocomplete.stories.jsx
diff --git a/packages/ui-components/stories/inputs/buttonSelect.stories.js b/packages/ui-components/stories/inputs/buttonSelect.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/buttonSelect.stories.js
rename to packages/ui-components/stories/inputs/buttonSelect.stories.jsx
diff --git a/packages/ui-components/stories/inputs/checkbox.stories.js b/packages/ui-components/stories/inputs/checkbox.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/checkbox.stories.js
rename to packages/ui-components/stories/inputs/checkbox.stories.jsx
diff --git a/packages/ui-components/stories/inputs/checkboxList.stories.js b/packages/ui-components/stories/inputs/checkboxList.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/checkboxList.stories.js
rename to packages/ui-components/stories/inputs/checkboxList.stories.jsx
diff --git a/packages/ui-components/stories/inputs/datePicker.stories.js b/packages/ui-components/stories/inputs/datePicker.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/datePicker.stories.js
rename to packages/ui-components/stories/inputs/datePicker.stories.jsx
diff --git a/packages/ui-components/stories/inputs/fileUploadField.stories.js b/packages/ui-components/stories/inputs/fileUploadField.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/fileUploadField.stories.js
rename to packages/ui-components/stories/inputs/fileUploadField.stories.jsx
diff --git a/packages/ui-components/stories/inputs/groupedSelect.stories.js b/packages/ui-components/stories/inputs/groupedSelect.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/groupedSelect.stories.js
rename to packages/ui-components/stories/inputs/groupedSelect.stories.jsx
diff --git a/packages/ui-components/stories/inputs/hexcodeField.stories.js b/packages/ui-components/stories/inputs/hexcodeField.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/hexcodeField.stories.js
rename to packages/ui-components/stories/inputs/hexcodeField.stories.jsx
diff --git a/packages/ui-components/stories/inputs/imageUploadField.stories.js b/packages/ui-components/stories/inputs/imageUploadField.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/imageUploadField.stories.js
rename to packages/ui-components/stories/inputs/imageUploadField.stories.jsx
diff --git a/packages/ui-components/stories/inputs/inputGroup.stories.js b/packages/ui-components/stories/inputs/inputGroup.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/inputGroup.stories.js
rename to packages/ui-components/stories/inputs/inputGroup.stories.jsx
diff --git a/packages/ui-components/stories/inputs/inputLabel.stories.js b/packages/ui-components/stories/inputs/inputLabel.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/inputLabel.stories.js
rename to packages/ui-components/stories/inputs/inputLabel.stories.jsx
diff --git a/packages/ui-components/stories/inputs/multiSelect.stories.js b/packages/ui-components/stories/inputs/multiSelect.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/multiSelect.stories.js
rename to packages/ui-components/stories/inputs/multiSelect.stories.jsx
diff --git a/packages/ui-components/stories/inputs/radioGroup.stories.js b/packages/ui-components/stories/inputs/radioGroup.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/radioGroup.stories.js
rename to packages/ui-components/stories/inputs/radioGroup.stories.jsx
diff --git a/packages/ui-components/stories/inputs/select.stories.js b/packages/ui-components/stories/inputs/select.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/select.stories.js
rename to packages/ui-components/stories/inputs/select.stories.jsx
diff --git a/packages/ui-components/stories/inputs/textField.stories.js b/packages/ui-components/stories/inputs/textField.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/inputs/textField.stories.js
rename to packages/ui-components/stories/inputs/textField.stories.jsx
diff --git a/packages/ui-components/stories/matrix.stories.js b/packages/ui-components/stories/matrix.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/matrix.stories.js
rename to packages/ui-components/stories/matrix.stories.jsx
diff --git a/packages/ui-components/stories/meter.stories.js b/packages/ui-components/stories/meter.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/meter.stories.js
rename to packages/ui-components/stories/meter.stories.jsx
diff --git a/packages/ui-components/stories/palette.stories.js b/packages/ui-components/stories/palette.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/palette.stories.js
rename to packages/ui-components/stories/palette.stories.jsx
diff --git a/packages/ui-components/stories/passwordStrengthBar.stories.js b/packages/ui-components/stories/passwordStrengthBar.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/passwordStrengthBar.stories.js
rename to packages/ui-components/stories/passwordStrengthBar.stories.jsx
diff --git a/packages/ui-components/stories/profileButton.stories.js b/packages/ui-components/stories/profileButton.stories.jsx
similarity index 86%
rename from packages/ui-components/stories/profileButton.stories.js
rename to packages/ui-components/stories/profileButton.stories.jsx
index 2d5dbe00b0..b39371fed2 100644
--- a/packages/ui-components/stories/profileButton.stories.js
+++ b/packages/ui-components/stories/profileButton.stories.jsx
@@ -6,7 +6,6 @@
import React from 'react';
import styled from 'styled-components';
import MuiBox from '@material-ui/core/Box';
-import { RouterProvider } from '../helpers/RouterProvider';
import { ProfileButton, ProfileButtonItem } from '../src/components';
const Container = styled(MuiBox)`
@@ -20,10 +19,10 @@ export default {
title: 'ProfileButton',
component: ProfileButton,
decorators: [
- story => (
-
- {story()}
-
+ Story => (
+
+
+
),
],
};
diff --git a/packages/ui-components/stories/qrCodeVisual.stories.js b/packages/ui-components/stories/qrCodeVisual.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/qrCodeVisual.stories.js
rename to packages/ui-components/stories/qrCodeVisual.stories.jsx
diff --git a/packages/ui-components/stories/splitButton.stories.js b/packages/ui-components/stories/splitButton.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/splitButton.stories.js
rename to packages/ui-components/stories/splitButton.stories.jsx
diff --git a/packages/ui-components/stories/story-utils/TableCells.js b/packages/ui-components/stories/story-utils/TableCells.jsx
similarity index 100%
rename from packages/ui-components/stories/story-utils/TableCells.js
rename to packages/ui-components/stories/story-utils/TableCells.jsx
diff --git a/packages/ui-components/stories/story-utils/api/connectApi.js b/packages/ui-components/stories/story-utils/api/connectApi.jsx
similarity index 100%
rename from packages/ui-components/stories/story-utils/api/connectApi.js
rename to packages/ui-components/stories/story-utils/api/connectApi.jsx
diff --git a/packages/ui-components/stories/story-utils/theme/darkTheme.js b/packages/ui-components/stories/story-utils/theme/darkTheme.js
deleted file mode 100644
index eb7afed2be..0000000000
--- a/packages/ui-components/stories/story-utils/theme/darkTheme.js
+++ /dev/null
@@ -1,28 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
- */
-
-import { createMuiTheme } from '@material-ui/core';
-
-const DARKENED_BLUE = '#262834';
-
-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',
- },
- },
-});
diff --git a/packages/ui-components/stories/story-utils/theme/index.js b/packages/ui-components/stories/story-utils/theme/index.js
deleted file mode 100644
index 2f77229134..0000000000
--- a/packages/ui-components/stories/story-utils/theme/index.js
+++ /dev/null
@@ -1,6 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-export * from './darkTheme';
-export * from './lightTheme';
diff --git a/packages/ui-components/stories/story-utils/theme/lightTheme.js b/packages/ui-components/stories/story-utils/theme/lightTheme.js
deleted file mode 100644
index 8948680393..0000000000
--- a/packages/ui-components/stories/story-utils/theme/lightTheme.js
+++ /dev/null
@@ -1,125 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- *
- */
-
-import { createMuiTheme } from '@material-ui/core/styles';
-import * as COLORS from './colors';
-
-const themeName = 'Tupaia-Storybook';
-const palette = {
- primary: {
- main: COLORS.BLUE,
- light: COLORS.LIGHT_BLUE,
- },
- secondary: {
- main: COLORS.DARK_BLUE,
- light: COLORS.LIGHT_BLUE,
- },
- error: {
- main: COLORS.RED,
- light: COLORS.LIGHT_RED,
- },
- warning: {
- main: COLORS.RED,
- light: COLORS.LIGHT_RED,
- },
- success: {
- main: COLORS.GREEN,
- dark: COLORS.DARK_GREEN,
- },
- text: {
- primary: COLORS.TEXT_DARKGREY,
- secondary: COLORS.TEXT_MIDGREY,
- tertiary: COLORS.TEXT_LIGHTGREY,
- },
- contrastText: COLORS.TEXT_MIDGREY,
- grey: {
- 100: COLORS.GREY_FB,
- 200: COLORS.GREY_F1,
- 300: COLORS.GREY_E2,
- 400: COLORS.GREY_DE,
- 500: COLORS.GREY_9F,
- 600: COLORS.GREY_72,
- },
- background: {
- default: 'transparent', // use background addon to switch colors
- paper: COLORS.WHITE,
- },
-};
-const typography = {
- h1: {
- fontSize: '3.125rem',
- fontWeight: 500,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- h2: {
- fontSize: '2rem',
- fontWeight: 600,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- h3: {
- fontSize: '1.5rem',
- fontWeight: 600,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- h4: {
- fontSize: '1.3125rem',
- fontWeight: 600,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- h5: {
- fontSize: '1.3125rem',
- fontWeight: 500,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- h6: {
- fontSize: '1.125rem',
- fontWeight: 500,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- subtitle1: {
- fontSize: '1.125rem',
- fontWeight: 500,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- subtitle2: {
- fontSize: '0.8125rem',
- fontWeight: 600,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- body1: {
- fontSize: '0.9375rem',
- fontWeight: 400,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- body2: {
- fontSize: '0.875rem',
- fontWeight: 400,
- lineHeight: 1.18,
- letterSpacing: 0,
- },
- button: {
- textTransform: 'none',
- letterSpacing: '0.035em',
- },
-};
-const shape = { borderRadius: 3 };
-const overrides = {
- MuiCard: {
- root: {
- borderColor: COLORS.GREY_DE,
- },
- },
-};
-export const lightTheme = createMuiTheme({ palette, themeName, typography, shape, overrides });
diff --git a/packages/ui-components/stories/tables/dataGrid.stories.js b/packages/ui-components/stories/tables/dataGrid.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/tables/dataGrid.stories.js
rename to packages/ui-components/stories/tables/dataGrid.stories.jsx
diff --git a/packages/ui-components/stories/tables/editableTable.stories.js b/packages/ui-components/stories/tables/editableTable.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/tables/editableTable.stories.js
rename to packages/ui-components/stories/tables/editableTable.stories.jsx
diff --git a/packages/ui-components/stories/tables/expandableTable.stories.js b/packages/ui-components/stories/tables/expandableTable.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/tables/expandableTable.stories.js
rename to packages/ui-components/stories/tables/expandableTable.stories.jsx
diff --git a/packages/ui-components/stories/tables/table.stories.js b/packages/ui-components/stories/tables/table.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/tables/table.stories.js
rename to packages/ui-components/stories/tables/table.stories.jsx
diff --git a/packages/ui-components/stories/tabs.stories.js b/packages/ui-components/stories/tabs.stories.js
deleted file mode 100644
index 00a5bd95cc..0000000000
--- a/packages/ui-components/stories/tabs.stories.js
+++ /dev/null
@@ -1,59 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import styled from 'styled-components';
-import { Dashboard, Warning, NewReleases } from '@material-ui/icons';
-import MuiBox from '@material-ui/core/Box';
-import { Tabs, Tab, LightTabs, LightTab } from '../src/components';
-import * as COLORS from './story-utils/theme/colors';
-
-export default {
- title: 'Tabs',
- component: Tabs,
-};
-
-const Container = styled(MuiBox)`
- max-width: 1200px;
- padding: 1rem;
-`;
-
-export const tabs = () => (
-
-
- Dashboard
- Alerts
-
-
-);
-
-export const iconTabs = () => (
-
-
-
- Dashboard
-
-
- Alerts
-
-
-
-);
-
-export const lightTabs = () => (
-
-
-
- Dashboard
-
-
- Alerts
-
-
- Outbreaks
-
-
-
-);
diff --git a/packages/ui-components/stories/toast.stories.js b/packages/ui-components/stories/toast.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/toast.stories.js
rename to packages/ui-components/stories/toast.stories.jsx
diff --git a/packages/ui-components/stories/toolbar.stories.js b/packages/ui-components/stories/toolbar.stories.js
deleted file mode 100644
index 850ec48645..0000000000
--- a/packages/ui-components/stories/toolbar.stories.js
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Tupaia
- * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
- */
-
-import React from 'react';
-import { Alarm } from '@material-ui/icons';
-import { TabsToolbar, Clipboard, WarningCloud } from '../src/components';
-import { RouterProvider } from '../helpers/RouterProvider';
-
-export default {
- title: 'Toolbar',
- decorators: [story => {story()}],
-};
-/**
- * links are slightly adjusted to work with storybook.
- */
-const links = [
- {
- label: 'Alerts',
- to: 'iframe.html',
- icon: ,
- },
- {
- label: 'Outbreak',
- to: 'outbreaks',
- icon: ,
- },
- {
- label: 'Archive',
- to: 'archive',
- icon: ,
- },
-];
-
-export const tabsToolbar = () => ;
diff --git a/packages/ui-components/stories/tooltip.stories.js b/packages/ui-components/stories/tooltip.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/tooltip.stories.js
rename to packages/ui-components/stories/tooltip.stories.jsx
diff --git a/packages/ui-components/stories/typography.stories.js b/packages/ui-components/stories/typography.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/typography.stories.js
rename to packages/ui-components/stories/typography.stories.jsx
diff --git a/packages/ui-components/stories/userMessage.stories.js b/packages/ui-components/stories/userMessage.stories.jsx
similarity index 100%
rename from packages/ui-components/stories/userMessage.stories.js
rename to packages/ui-components/stories/userMessage.stories.jsx
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index ceac796a45..db999d5910 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -17,6 +17,8 @@
"include": [
"src/**/*",
"jest.config.ts",
- "helpers/**/*"
+ "helpers/**/*",
+ "stories/**/*",
+ ".storybook"
]
}
diff --git a/yarn.lock b/yarn.lock
index f90d6e20f2..d70077e904 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1539,29 +1539,6 @@ __metadata:
languageName: node
linkType: hard
-"@babel/core@npm:^7.1.0, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.7.5":
- version: 7.15.5
- resolution: "@babel/core@npm:7.15.5"
- dependencies:
- "@babel/code-frame": ^7.14.5
- "@babel/generator": ^7.15.4
- "@babel/helper-compilation-targets": ^7.15.4
- "@babel/helper-module-transforms": ^7.15.4
- "@babel/helpers": ^7.15.4
- "@babel/parser": ^7.15.5
- "@babel/template": ^7.15.4
- "@babel/traverse": ^7.15.4
- "@babel/types": ^7.15.4
- convert-source-map: ^1.7.0
- debug: ^4.1.0
- gensync: ^1.0.0-beta.2
- json5: ^2.1.2
- semver: ^6.3.0
- source-map: ^0.5.0
- checksum: 8121bf74040d98562b773c1e92a174cd53c99a5158ae5a9ef25645ed35d6f821c64155e394cdb04e7dc77a0871ba42a638f6703b2c44a75bc04564b21cad9e1b
- languageName: node
- linkType: hard
-
"@babel/core@npm:^7.11.6, @babel/core@npm:^7.13.16, @babel/core@npm:^7.20.12, @babel/core@npm:^7.22.0, @babel/core@npm:^7.22.5, @babel/core@npm:^7.22.9":
version: 7.22.9
resolution: "@babel/core@npm:7.22.9"
@@ -1585,6 +1562,29 @@ __metadata:
languageName: node
linkType: hard
+"@babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.7.5":
+ version: 7.15.5
+ resolution: "@babel/core@npm:7.15.5"
+ dependencies:
+ "@babel/code-frame": ^7.14.5
+ "@babel/generator": ^7.15.4
+ "@babel/helper-compilation-targets": ^7.15.4
+ "@babel/helper-module-transforms": ^7.15.4
+ "@babel/helpers": ^7.15.4
+ "@babel/parser": ^7.15.5
+ "@babel/template": ^7.15.4
+ "@babel/traverse": ^7.15.4
+ "@babel/types": ^7.15.4
+ convert-source-map: ^1.7.0
+ debug: ^4.1.0
+ gensync: ^1.0.0-beta.2
+ json5: ^2.1.2
+ semver: ^6.3.0
+ source-map: ^0.5.0
+ checksum: 8121bf74040d98562b773c1e92a174cd53c99a5158ae5a9ef25645ed35d6f821c64155e394cdb04e7dc77a0871ba42a638f6703b2c44a75bc04564b21cad9e1b
+ languageName: node
+ linkType: hard
+
"@babel/core@npm:^7.16.0":
version: 7.23.7
resolution: "@babel/core@npm:7.23.7"
@@ -7899,18 +7899,6 @@ __metadata:
languageName: node
linkType: hard
-"@cnakazawa/watch@npm:^1.0.3":
- version: 1.0.3
- resolution: "@cnakazawa/watch@npm:1.0.3"
- dependencies:
- exec-sh: ^0.3.2
- minimist: ^1.2.0
- bin:
- watch: ./cli.js
- checksum: c11ca927d9e625ffa67d3d49b5a9a97d32ef82611abffdc645a41dd3b985a07c1d82c4a3dcc707fa193ef58494ccd21f3eb02fb22db3ce366654ccc364080864
- languageName: node
- linkType: hard
-
"@colors/colors@npm:1.5.0":
version: 1.5.0
resolution: "@colors/colors@npm:1.5.0"
@@ -8940,29 +8928,6 @@ __metadata:
languageName: node
linkType: hard
-"@jest/transform@npm:^26.6.2":
- version: 26.6.2
- resolution: "@jest/transform@npm:26.6.2"
- dependencies:
- "@babel/core": ^7.1.0
- "@jest/types": ^26.6.2
- babel-plugin-istanbul: ^6.0.0
- chalk: ^4.0.0
- convert-source-map: ^1.4.0
- fast-json-stable-stringify: ^2.0.0
- graceful-fs: ^4.2.4
- jest-haste-map: ^26.6.2
- jest-regex-util: ^26.0.0
- jest-util: ^26.6.2
- micromatch: ^4.0.2
- pirates: ^4.0.1
- slash: ^3.0.0
- source-map: ^0.6.1
- write-file-atomic: ^3.0.0
- checksum: 31667b925a2f3b310d854495da0ab67be8f5da24df76ecfc51162e75f1140aed5d18069ba190cb5e0c7e492b04272c8c79076ddf5bbcff530ee80a16a02c4545
- languageName: node
- linkType: hard
-
"@jest/transform@npm:^29.3.1":
version: 29.6.1
resolution: "@jest/transform@npm:29.6.1"
@@ -9484,18 +9449,7 @@ __metadata:
languageName: node
linkType: hard
-"@mdx-js/loader@npm:^1.6.22":
- version: 1.6.22
- resolution: "@mdx-js/loader@npm:1.6.22"
- dependencies:
- "@mdx-js/mdx": 1.6.22
- "@mdx-js/react": 1.6.22
- loader-utils: 2.0.0
- checksum: 5ce4b92824555c6dd06c12ee7b9fc036e41499a5026218597316236d62253b6ff6417a416445a71f685716b57bbfc45593f156373252d1f53510b9ef9666334a
- languageName: node
- linkType: hard
-
-"@mdx-js/mdx@npm:1.6.22, @mdx-js/mdx@npm:^1.6.22":
+"@mdx-js/mdx@npm:^1.6.22":
version: 1.6.22
resolution: "@mdx-js/mdx@npm:1.6.22"
dependencies:
@@ -9522,15 +9476,6 @@ __metadata:
languageName: node
linkType: hard
-"@mdx-js/react@npm:1.6.22, @mdx-js/react@npm:^1.6.22":
- version: 1.6.22
- resolution: "@mdx-js/react@npm:1.6.22"
- peerDependencies:
- react: ^16.13.1 || ^17.0.0
- checksum: bc84bd514bc127f898819a0c6f1a6915d9541011bd8aefa1fcc1c9bea8939f31051409e546bdec92babfa5b56092a16d05ef6d318304ac029299df5181dc94c8
- languageName: node
- linkType: hard
-
"@mdx-js/react@npm:^2.1.5":
version: 2.3.0
resolution: "@mdx-js/react@npm:2.3.0"
@@ -10598,39 +10543,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-actions@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-actions@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/client-api": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/core-events": 6.3.9
- "@storybook/theming": 6.3.9
- core-js: ^3.8.2
- fast-deep-equal: ^3.1.3
- global: ^4.4.0
- lodash: ^4.17.20
- polished: ^4.0.5
- prop-types: ^15.7.2
- react-inspector: ^5.1.0
- regenerator-runtime: ^0.13.7
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- uuid-browser: ^3.1.0
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: 4096a8f2b120cdf2eea21c652afe428e7013cbec528d52a85e46e81c289d2a825f456d2e0826350a95bd03077f724c1d9b9778f759405f7e6d36817ecad3b812
- languageName: node
- linkType: hard
-
"@storybook/addon-actions@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-actions@npm:7.1.0"
@@ -10678,34 +10590,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-backgrounds@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-backgrounds@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/client-logger": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/core-events": 6.3.9
- "@storybook/theming": 6.3.9
- core-js: ^3.8.2
- global: ^4.4.0
- memoizerific: ^1.11.3
- regenerator-runtime: ^0.13.7
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: e43d304c22cd73f30ebafda39d6dd3566f6cce675c632457b74f42a92af8b80fd2c37e9cff22d84cb373f346f5543167a9ece927898af6c695dd0c357669b06b
- languageName: node
- linkType: hard
-
"@storybook/addon-backgrounds@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-backgrounds@npm:7.1.0"
@@ -10745,30 +10629,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-controls@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-controls@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/client-api": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/node-logger": 6.3.9
- "@storybook/theming": 6.3.9
- core-js: ^3.8.2
- ts-dedent: ^2.0.0
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: b3cc821f110bb6728089c79d59662941fbe44ec89e3caeb2f990cd7251aa57d8d1bb9c29502ec37b4d08043432f877741a42e706a20a5dad6f33dee76b0d16f1
- languageName: node
- linkType: hard
-
"@storybook/addon-controls@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-controls@npm:7.1.0"
@@ -10809,96 +10669,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-docs@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-docs@npm:6.3.9"
- dependencies:
- "@babel/core": ^7.12.10
- "@babel/generator": ^7.12.11
- "@babel/parser": ^7.12.11
- "@babel/plugin-transform-react-jsx": ^7.12.12
- "@babel/preset-env": ^7.12.11
- "@jest/transform": ^26.6.2
- "@mdx-js/loader": ^1.6.22
- "@mdx-js/mdx": ^1.6.22
- "@mdx-js/react": ^1.6.22
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/builder-webpack4": 6.3.9
- "@storybook/client-api": 6.3.9
- "@storybook/client-logger": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/core": 6.3.9
- "@storybook/core-events": 6.3.9
- "@storybook/csf": 0.0.1
- "@storybook/csf-tools": 6.3.9
- "@storybook/node-logger": 6.3.9
- "@storybook/postinstall": 6.3.9
- "@storybook/source-loader": 6.3.9
- "@storybook/theming": 6.3.9
- acorn: ^7.4.1
- acorn-jsx: ^5.3.1
- acorn-walk: ^7.2.0
- core-js: ^3.8.2
- doctrine: ^3.0.0
- escodegen: ^2.0.0
- fast-deep-equal: ^3.1.3
- global: ^4.4.0
- html-tags: ^3.1.0
- js-string-escape: ^1.0.1
- loader-utils: ^2.0.0
- lodash: ^4.17.20
- p-limit: ^3.1.0
- prettier: ~2.2.1
- prop-types: ^15.7.2
- react-element-to-jsx-string: ^14.3.2
- regenerator-runtime: ^0.13.7
- remark-external-links: ^8.0.0
- remark-slug: ^6.0.0
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- peerDependencies:
- "@storybook/angular": 6.3.9
- "@storybook/vue": 6.3.9
- "@storybook/vue3": 6.3.9
- "@storybook/web-components": 6.3.9
- lit: ^2.0.0-rc.1
- lit-html: ^1.4.1 || ^2.0.0-rc.3
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- svelte: ^3.31.2
- sveltedoc-parser: ^4.1.0
- vue: ^2.6.10 || ^3.0.0
- webpack: "*"
- peerDependenciesMeta:
- "@storybook/angular":
- optional: true
- "@storybook/vue":
- optional: true
- "@storybook/vue3":
- optional: true
- "@storybook/web-components":
- optional: true
- lit:
- optional: true
- lit-html:
- optional: true
- react:
- optional: true
- react-dom:
- optional: true
- svelte:
- optional: true
- sveltedoc-parser:
- optional: true
- vue:
- optional: true
- webpack:
- optional: true
- checksum: 9dde2dfbc7b42086686cc34374f6978cb8585187dd9ce36594ae125fb4daf4d4ddebe9d47adf5cf693bf0f9106cc2fa87a9689b5215beebb7aad76229491493d
- languageName: node
- linkType: hard
-
"@storybook/addon-docs@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-docs@npm:7.1.0"
@@ -10952,50 +10722,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-essentials@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-essentials@npm:6.3.9"
- dependencies:
- "@storybook/addon-actions": 6.3.9
- "@storybook/addon-backgrounds": 6.3.9
- "@storybook/addon-controls": 6.3.9
- "@storybook/addon-docs": 6.3.9
- "@storybook/addon-measure": ^2.0.0
- "@storybook/addon-toolbars": 6.3.9
- "@storybook/addon-viewport": 6.3.9
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/node-logger": 6.3.9
- core-js: ^3.8.2
- regenerator-runtime: ^0.13.7
- storybook-addon-outline: ^1.4.1
- ts-dedent: ^2.0.0
- peerDependencies:
- "@babel/core": ^7.9.6
- "@storybook/vue": 6.3.9
- "@storybook/web-components": 6.3.9
- babel-loader: ^8.0.0
- lit-html: ^1.4.1 || ^2.0.0-rc.3
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- webpack: "*"
- peerDependenciesMeta:
- "@storybook/vue":
- optional: true
- "@storybook/web-components":
- optional: true
- lit-html:
- optional: true
- react:
- optional: true
- react-dom:
- optional: true
- webpack:
- optional: true
- checksum: b7d0fd7bead2e2f7411b0e59eac967e971e1c356c1dd8aa25b07300cf1b2fcbd52b2e46d41168e8da018a839105a9fa37dbd78a81d88ca0cf86ce5f33b5d1728
- languageName: node
- linkType: hard
-
"@storybook/addon-essentials@npm:^7.0.18":
version: 7.1.0
resolution: "@storybook/addon-essentials@npm:7.1.0"
@@ -11154,26 +10880,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-measure@npm:^2.0.0":
- version: 2.0.0
- resolution: "@storybook/addon-measure@npm:2.0.0"
- peerDependencies:
- "@storybook/addons": ^6.3.0
- "@storybook/api": ^6.3.0
- "@storybook/components": ^6.3.0
- "@storybook/core-events": ^6.3.0
- "@storybook/theming": ^6.3.0
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: c397a80c3c0d8cf9f3c9a4362c5603ea34aa2b82894da4089ab04407e313eff125e60d4cbb83fa378b9cc796bd3140ed6c56f0e568ca02777ea0f841719220e3
- languageName: node
- linkType: hard
-
"@storybook/addon-outline@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-outline@npm:7.1.0"
@@ -11210,29 +10916,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-toolbars@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-toolbars@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/client-api": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/theming": 6.3.9
- core-js: ^3.8.2
- regenerator-runtime: ^0.13.7
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: 4fe69536af0db9752cb3e58b0f2a6887740c61a143b03da4cb1e0a293ee9c4064bba60b1d8be104ff752505bcb1e88dcc8b358121a4bee3a386d4dee75646705
- languageName: node
- linkType: hard
-
"@storybook/addon-toolbars@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-toolbars@npm:7.1.0"
@@ -11263,33 +10946,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addon-viewport@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/addon-viewport@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/api": 6.3.9
- "@storybook/client-logger": 6.3.9
- "@storybook/components": 6.3.9
- "@storybook/core-events": 6.3.9
- "@storybook/theming": 6.3.9
- core-js: ^3.8.2
- global: ^4.4.0
- memoizerific: ^1.11.3
- prop-types: ^15.7.2
- regenerator-runtime: ^0.13.7
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- peerDependenciesMeta:
- react:
- optional: true
- react-dom:
- optional: true
- checksum: 97666ef32633b43fad2a022f79b8264b7466b09c5bb29eff7ce973c5ffaf7eda409c76a88960031775efffce6fe4851ac16fcb4d0f33a96d1d333b7cfa178ec4
- languageName: node
- linkType: hard
-
"@storybook/addon-viewport@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/addon-viewport@npm:7.1.0"
@@ -11346,57 +11002,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/addons@npm:~6.3.0":
- version: 6.3.13
- resolution: "@storybook/addons@npm:6.3.13"
- dependencies:
- "@storybook/api": 6.3.13
- "@storybook/channels": 6.3.13
- "@storybook/client-logger": 6.3.13
- "@storybook/core-events": 6.3.13
- "@storybook/router": 6.3.13
- "@storybook/theming": 6.3.13
- core-js: ^3.8.2
- global: ^4.4.0
- regenerator-runtime: ^0.13.7
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 6d89d0f182ff9c897bae8577970073d2caa7bcd91021462c0eafdc0f716af76de807aabba3a207185b1f99d27c8fc565f17d7f6c6a46e802fb449500a8138fbd
- languageName: node
- linkType: hard
-
-"@storybook/api@npm:6.3.13, @storybook/api@npm:~6.3.0":
- version: 6.3.13
- resolution: "@storybook/api@npm:6.3.13"
- dependencies:
- "@reach/router": ^1.3.4
- "@storybook/channels": 6.3.13
- "@storybook/client-logger": 6.3.13
- "@storybook/core-events": 6.3.13
- "@storybook/csf": 0.0.1
- "@storybook/router": 6.3.13
- "@storybook/semver": ^7.3.2
- "@storybook/theming": 6.3.13
- "@types/reach__router": ^1.3.7
- core-js: ^3.8.2
- fast-deep-equal: ^3.1.3
- global: ^4.4.0
- lodash: ^4.17.20
- memoizerific: ^1.11.3
- qs: ^6.10.0
- regenerator-runtime: ^0.13.7
- store2: ^2.12.0
- telejson: ^5.3.2
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 4c9e712e1845b17211c47dce11a9cf430478a1b7c3798b10add3a36add8fc13403de7105244c156ef337a1ad2ee45c97745a94a01858d14f2922c9c6844b91f5
- languageName: node
- linkType: hard
-
"@storybook/api@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/api@npm:6.3.9"
@@ -11695,17 +11300,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/channels@npm:6.3.13":
- version: 6.3.13
- resolution: "@storybook/channels@npm:6.3.13"
- dependencies:
- core-js: ^3.8.2
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- checksum: 181d870a6f3c749166e77db23b6ee531725889f016670f506601ce3c77cd3fb63ec7b669bf288ce4d957d9b849d3691398003879df629ce6697d01f8d3586693
- languageName: node
- linkType: hard
-
"@storybook/channels@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/channels@npm:6.3.9"
@@ -11811,16 +11405,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/client-logger@npm:6.3.13":
- version: 6.3.13
- resolution: "@storybook/client-logger@npm:6.3.13"
- dependencies:
- core-js: ^3.8.2
- global: ^4.4.0
- checksum: 6ca4e065add7fe0b9f063eb60e6b74554d27153ebaee4ad3a65ed51aea66ea84fad02a5be5f96ca450790b9a6448550e5892adfd66b8b0db21f2b727fcf8eba1
- languageName: node
- linkType: hard
-
"@storybook/client-logger@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/client-logger@npm:6.3.9"
@@ -11946,41 +11530,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/components@npm:~6.3.0":
- version: 6.3.13
- resolution: "@storybook/components@npm:6.3.13"
- dependencies:
- "@popperjs/core": ^2.6.0
- "@storybook/client-logger": 6.3.13
- "@storybook/csf": 0.0.1
- "@storybook/theming": 6.3.13
- "@types/color-convert": ^2.0.0
- "@types/overlayscrollbars": ^1.12.0
- "@types/react-syntax-highlighter": 11.0.5
- color-convert: ^2.0.1
- core-js: ^3.8.2
- fast-deep-equal: ^3.1.3
- global: ^4.4.0
- lodash: ^4.17.20
- markdown-to-jsx: ^7.1.3
- memoizerific: ^1.11.3
- overlayscrollbars: ^1.13.1
- polished: ^4.0.5
- prop-types: ^15.7.2
- react-colorful: ^5.1.2
- react-popper-tooltip: ^3.1.1
- react-syntax-highlighter: ^13.5.3
- react-textarea-autosize: ^8.3.0
- regenerator-runtime: ^0.13.7
- ts-dedent: ^2.0.0
- util-deprecate: ^1.0.2
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 84709bedad568125ab7ac3ceeef9f3b8c9105bbe58111a2bbea12095591c720c100bbe052b883b382d603da777f8068b78adaf21bb946d0e18ef961dd75e976e
- languageName: node
- linkType: hard
-
"@storybook/core-client@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/core-client@npm:6.3.9"
@@ -12115,15 +11664,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/core-events@npm:6.3.13, @storybook/core-events@npm:~6.3.0":
- version: 6.3.13
- resolution: "@storybook/core-events@npm:6.3.13"
- dependencies:
- core-js: ^3.8.2
- checksum: 03a0e0586b53959e883017746f554e6a1fc5d249b93ce0a8f259996619ad02acaa1b978aa715634ec19c0946425eafcc6b12a73da431b5684bb7befcb9e3969d
- languageName: node
- linkType: hard
-
"@storybook/core-events@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/core-events@npm:6.3.9"
@@ -12540,15 +12080,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/postinstall@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/postinstall@npm:6.3.9"
- dependencies:
- core-js: ^3.8.2
- checksum: 18cc19203223b12fe25ffdb68c6985478d76b104035642138300eaad1678a8e6f125d251f0d9494dec10e3be59d9d487725a853983f8a7e595b264a0e78d2d51
- languageName: node
- linkType: hard
-
"@storybook/postinstall@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/postinstall@npm:7.1.0"
@@ -12793,27 +12324,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/router@npm:6.3.13":
- version: 6.3.13
- resolution: "@storybook/router@npm:6.3.13"
- dependencies:
- "@reach/router": ^1.3.4
- "@storybook/client-logger": 6.3.13
- "@types/reach__router": ^1.3.7
- core-js: ^3.8.2
- fast-deep-equal: ^3.1.3
- global: ^4.4.0
- lodash: ^4.17.20
- memoizerific: ^1.11.3
- qs: ^6.10.0
- ts-dedent: ^2.0.0
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: d776743b71dc9aa3dc109b8c35fd26dc1f5bdf47b6e2b1a4066f65f492fba11e1c286987828f915770b40ff98f7e9491caed14916c2a604a5db5ae935070d9b1
- languageName: node
- linkType: hard
-
"@storybook/router@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/router@npm:6.3.9"
@@ -12861,27 +12371,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/source-loader@npm:6.3.9":
- version: 6.3.9
- resolution: "@storybook/source-loader@npm:6.3.9"
- dependencies:
- "@storybook/addons": 6.3.9
- "@storybook/client-logger": 6.3.9
- "@storybook/csf": 0.0.1
- core-js: ^3.8.2
- estraverse: ^5.2.0
- global: ^4.4.0
- loader-utils: ^2.0.0
- lodash: ^4.17.20
- prettier: ~2.2.1
- regenerator-runtime: ^0.13.7
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 010a8223b01000f23b18705cc64bedf27cff99c4deb7eb8da05e9b89b7e0ea6d9f966b48a5a11cf755243f1eba39c027c4e5c16fc02843b3400961ca9593ca9e
- languageName: node
- linkType: hard
-
"@storybook/telemetry@npm:7.1.0":
version: 7.1.0
resolution: "@storybook/telemetry@npm:7.1.0"
@@ -12911,29 +12400,6 @@ __metadata:
languageName: node
linkType: hard
-"@storybook/theming@npm:6.3.13":
- version: 6.3.13
- resolution: "@storybook/theming@npm:6.3.13"
- dependencies:
- "@emotion/core": ^10.1.1
- "@emotion/is-prop-valid": ^0.8.6
- "@emotion/styled": ^10.0.27
- "@storybook/client-logger": 6.3.13
- core-js: ^3.8.2
- deep-object-diff: ^1.1.0
- emotion-theming: ^10.0.27
- global: ^4.4.0
- memoizerific: ^1.11.3
- polished: ^4.0.5
- resolve-from: ^5.0.0
- ts-dedent: ^2.0.0
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 5f7610f96a1f97f0839f74e547f49624884a9ee6a379ac56d2d40a25fb71be61204fe67dee987ebacc21542521ee65136fe418b1c693324645b23f87bc523938
- languageName: node
- linkType: hard
-
"@storybook/theming@npm:6.3.9":
version: 6.3.9
resolution: "@storybook/theming@npm:6.3.9"
@@ -14158,8 +13624,6 @@ __metadata:
"@material-ui/styles": ^4.9.10
"@mui/types": ^7.2.4
"@mui/x-data-grid": ^4.0.0
- "@storybook/addon-essentials": 6.3.9
- "@storybook/react": ^6.3.9
"@testing-library/jest-dom": ^6.2.0
"@tupaia/types": "workspace:*"
"@tupaia/utils": "workspace:*"
@@ -14172,7 +13636,6 @@ __metadata:
"@types/react-table": ^7.7.14
"@types/styled-components": ^5.0.0
ace-builds: ^1.10.1
- babel-loader: 8.1.0
date-fns: ^2.12.0
downloadjs: ^1.4.7
faker: ^4.1.0
@@ -14186,7 +13649,6 @@ __metadata:
qrcode: ^1.5.3
react: ^16.13.1
react-ace: ^10.1.0
- react-docgen-typescript-plugin: ^1.0.5
react-dom: ^16.13.1
react-dropzone: ^14.2.3
react-hook-form: ^6.15.1
@@ -14771,15 +14233,6 @@ __metadata:
languageName: node
linkType: hard
-"@types/graceful-fs@npm:^4.1.2":
- version: 4.1.3
- resolution: "@types/graceful-fs@npm:4.1.3"
- dependencies:
- "@types/node": "*"
- checksum: f13a1b177e44ceafd430f1d5f63b7e7fd2a430c47d5dd1a20d10b88c1c5cdb033d96d539a084de79663b8735f72d31e8aa574f10daa622b1df16285f6a057383
- languageName: node
- linkType: hard
-
"@types/graceful-fs@npm:^4.1.3":
version: 4.1.6
resolution: "@types/graceful-fs@npm:4.1.6"
@@ -17918,22 +17371,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-loader@npm:8.1.0":
- version: 8.1.0
- resolution: "babel-loader@npm:8.1.0"
- dependencies:
- find-cache-dir: ^2.1.0
- loader-utils: ^1.4.0
- mkdirp: ^0.5.3
- pify: ^4.0.1
- schema-utils: ^2.6.5
- peerDependencies:
- "@babel/core": ^7.0.0
- webpack: ">=2"
- checksum: fdbcae91cc43366206320a1cbe40d358a64ba2dfaa561fbd690efe0db6256c9d27ab7600f7c84041fbc4c2a6f0279175b1f8d1fa5ed17ec30bbd734da84a1bc0
- languageName: node
- linkType: hard
-
"babel-loader@npm:^8.2.2":
version: 8.2.2
resolution: "babel-loader@npm:8.2.2"
@@ -18013,19 +17450,6 @@ __metadata:
languageName: node
linkType: hard
-"babel-plugin-istanbul@npm:^6.0.0":
- version: 6.0.0
- resolution: "babel-plugin-istanbul@npm:6.0.0"
- dependencies:
- "@babel/helper-plugin-utils": ^7.0.0
- "@istanbuljs/load-nyc-config": ^1.0.0
- "@istanbuljs/schema": ^0.1.2
- istanbul-lib-instrument: ^4.0.0
- test-exclude: ^6.0.0
- checksum: bc586cf088ec471a98a474ef0e9361ace61947da2a3e54162f1e1ab712a1a81a88007639e8aff7db2fc8678ae7c671e696e6edd6ccf72db8e6af86f0628d5a08
- languageName: node
- linkType: hard
-
"babel-plugin-istanbul@npm:^6.1.1":
version: 6.1.1
resolution: "babel-plugin-istanbul@npm:6.1.1"
@@ -19630,15 +19054,6 @@ __metadata:
languageName: node
linkType: hard
-"capture-exit@npm:^2.0.0":
- version: 2.0.0
- resolution: "capture-exit@npm:2.0.0"
- dependencies:
- rsvp: ^4.8.4
- checksum: 0b9f10daca09e521da9599f34c8e7af14ad879c336e2bdeb19955b375398ae1c5bcc91ac9f2429944343057ee9ed028b1b2fb28816c384e0e55d70c439b226f4
- languageName: node
- linkType: hard
-
"case-sensitive-paths-webpack-plugin@npm:^2.3.0":
version: 2.4.0
resolution: "case-sensitive-paths-webpack-plugin@npm:2.4.0"
@@ -20835,7 +20250,7 @@ __metadata:
languageName: node
linkType: hard
-"convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.4.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
+"convert-source-map@npm:^1.1.0, convert-source-map@npm:^1.5.0, convert-source-map@npm:^1.6.0, convert-source-map@npm:^1.7.0":
version: 1.7.0
resolution: "convert-source-map@npm:1.7.0"
dependencies:
@@ -21304,7 +20719,7 @@ __metadata:
languageName: node
linkType: hard
-"cross-spawn@npm:^6.0.0, cross-spawn@npm:^6.0.5":
+"cross-spawn@npm:^6.0.5":
version: 6.0.5
resolution: "cross-spawn@npm:6.0.5"
dependencies:
@@ -24820,28 +24235,6 @@ __metadata:
languageName: node
linkType: hard
-"exec-sh@npm:^0.3.2":
- version: 0.3.4
- resolution: "exec-sh@npm:0.3.4"
- checksum: a1a4a37c57ce405bfb6e82e814b5d1d8a3da4e076cc38fcac5ac2ccd5d1f91ec10d70f19d56c878dde4899dbbf9233369e83f3b64ebdfe3daee096f9e939b37b
- languageName: node
- linkType: hard
-
-"execa@npm:^1.0.0":
- version: 1.0.0
- resolution: "execa@npm:1.0.0"
- dependencies:
- cross-spawn: ^6.0.0
- get-stream: ^4.0.0
- is-stream: ^1.1.0
- npm-run-path: ^2.0.0
- p-finally: ^1.0.0
- signal-exit: ^3.0.0
- strip-eof: ^1.0.0
- checksum: ddf1342c1c7d02dd93b41364cd847640f6163350d9439071abf70bf4ceb1b9b2b2e37f54babb1d8dc1df8e0d8def32d0e81e74a2e62c3e1d70c303eb4c306bc4
- languageName: node
- linkType: hard
-
"execa@npm:^4.0.2":
version: 4.1.0
resolution: "execa@npm:4.1.0"
@@ -26154,22 +25547,22 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@npm:^2.1.2, fsevents@npm:~2.1.2":
- version: 2.1.3
- resolution: "fsevents@npm:2.1.3"
+"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
+ version: 2.3.2
+ resolution: "fsevents@npm:2.3.2"
dependencies:
node-gyp: latest
- checksum: b5ec0516b44d75b60af5c01ff80a80cd995d175e4640d2a92fbabd02991dd664d76b241b65feef0775c23d531c3c74742c0fbacd6205af812a9c3cef59f04292
+ checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
conditions: os=darwin
languageName: node
linkType: hard
-"fsevents@npm:^2.3.2, fsevents@npm:~2.3.2":
- version: 2.3.2
- resolution: "fsevents@npm:2.3.2"
+"fsevents@npm:~2.1.2":
+ version: 2.1.3
+ resolution: "fsevents@npm:2.1.3"
dependencies:
node-gyp: latest
- checksum: 97ade64e75091afee5265e6956cb72ba34db7819b4c3e94c431d4be2b19b8bb7a2d4116da417950c3425f17c8fe693d25e20212cac583ac1521ad066b77ae31f
+ checksum: b5ec0516b44d75b60af5c01ff80a80cd995d175e4640d2a92fbabd02991dd664d76b241b65feef0775c23d531c3c74742c0fbacd6205af812a9c3cef59f04292
conditions: os=darwin
languageName: node
linkType: hard
@@ -26196,18 +25589,18 @@ __metadata:
languageName: node
linkType: hard
-"fsevents@patch:fsevents@^2.1.2#~builtin, fsevents@patch:fsevents@~2.1.2#~builtin":
- version: 2.1.3
- resolution: "fsevents@patch:fsevents@npm%3A2.1.3#~builtin::version=2.1.3&hash=18f3a7"
+"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin":
+ version: 2.3.2
+ resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=18f3a7"
dependencies:
node-gyp: latest
conditions: os=darwin
languageName: node
linkType: hard
-"fsevents@patch:fsevents@^2.3.2#~builtin, fsevents@patch:fsevents@~2.3.2#~builtin":
- version: 2.3.2
- resolution: "fsevents@patch:fsevents@npm%3A2.3.2#~builtin::version=2.3.2&hash=18f3a7"
+"fsevents@patch:fsevents@~2.1.2#~builtin":
+ version: 2.1.3
+ resolution: "fsevents@patch:fsevents@npm%3A2.1.3#~builtin::version=2.1.3&hash=18f3a7"
dependencies:
node-gyp: latest
conditions: os=darwin
@@ -26424,7 +25817,7 @@ __metadata:
languageName: node
linkType: hard
-"get-stream@npm:^4.0.0, get-stream@npm:^4.1.0":
+"get-stream@npm:^4.1.0":
version: 4.1.0
resolution: "get-stream@npm:4.1.0"
dependencies:
@@ -28654,16 +28047,6 @@ __metadata:
languageName: node
linkType: hard
-"is-dom@npm:^1.0.0":
- version: 1.1.0
- resolution: "is-dom@npm:1.1.0"
- dependencies:
- is-object: ^1.0.1
- is-window: ^1.0.2
- checksum: 72aff0a7366b801c9d598d49452ec06544b52c3da92a0c6c3cacace33bb0c3df5ba1b4e422ac39224773316a553699d5920a1eb136919319f57d00e6384eb41b
- languageName: node
- linkType: hard
-
"is-electron@npm:2.2.2":
version: 2.2.2
resolution: "is-electron@npm:2.2.2"
@@ -29247,13 +28630,6 @@ __metadata:
languageName: node
linkType: hard
-"is-window@npm:^1.0.2":
- version: 1.0.2
- resolution: "is-window@npm:1.0.2"
- checksum: aeaacd2ca816d38d4e2fba4670158fba2190061f28a61c5d84df7c479abf8897b8cb634d22cb76cdf7805035e95bebd430faaab6231ac2ebc814eae02d2c8fd4
- languageName: node
- linkType: hard
-
"is-windows@npm:^1.0.2":
version: 1.0.2
resolution: "is-windows@npm:1.0.2"
@@ -29816,31 +29192,6 @@ __metadata:
languageName: node
linkType: hard
-"jest-haste-map@npm:^26.6.2":
- version: 26.6.2
- resolution: "jest-haste-map@npm:26.6.2"
- dependencies:
- "@jest/types": ^26.6.2
- "@types/graceful-fs": ^4.1.2
- "@types/node": "*"
- anymatch: ^3.0.3
- fb-watchman: ^2.0.0
- fsevents: ^2.1.2
- graceful-fs: ^4.2.4
- jest-regex-util: ^26.0.0
- jest-serializer: ^26.6.2
- jest-util: ^26.6.2
- jest-worker: ^26.6.2
- micromatch: ^4.0.2
- sane: ^4.0.3
- walker: ^1.0.7
- dependenciesMeta:
- fsevents:
- optional: true
- checksum: 8ad5236d5646d2388d2bd58a57ea53698923434f43d59ea9ebdc58bce4d0b8544c8de2f7acaa9a6d73171f04460388b2b6d7d6b6c256aea4ebb8780140781596
- languageName: node
- linkType: hard
-
"jest-haste-map@npm:^29.6.1":
version: 29.6.1
resolution: "jest-haste-map@npm:29.6.1"
@@ -30035,13 +29386,6 @@ __metadata:
languageName: node
linkType: hard
-"jest-regex-util@npm:^26.0.0":
- version: 26.0.0
- resolution: "jest-regex-util@npm:26.0.0"
- checksum: 930a00665e8dfbedc29140678b4a54f021b41b895cf35050f76f557c1da3ac48ff42dd7b18ba2ccba6f4e518c6445d6753730d03ec7049901b93992db1ef0483
- languageName: node
- linkType: hard
-
"jest-regex-util@npm:^27.0.6":
version: 27.0.6
resolution: "jest-regex-util@npm:27.0.6"
@@ -30149,16 +29493,6 @@ __metadata:
languageName: node
linkType: hard
-"jest-serializer@npm:^26.6.2":
- version: 26.6.2
- resolution: "jest-serializer@npm:26.6.2"
- dependencies:
- "@types/node": "*"
- graceful-fs: ^4.2.4
- checksum: dbecfb0d01462fe486a0932cf1680cf6abb204c059db2a8f72c6c2a7c9842a82f6d256874112774cea700764ed8f38fc9e3db982456c138d87353e3390e746fe
- languageName: node
- linkType: hard
-
"jest-snapshot@npm:^29.7.0":
version: 29.7.0
resolution: "jest-snapshot@npm:29.7.0"
@@ -30187,20 +29521,6 @@ __metadata:
languageName: node
linkType: hard
-"jest-util@npm:^26.6.2":
- version: 26.6.2
- resolution: "jest-util@npm:26.6.2"
- dependencies:
- "@jest/types": ^26.6.2
- "@types/node": "*"
- chalk: ^4.0.0
- graceful-fs: ^4.2.4
- is-ci: ^2.0.0
- micromatch: ^4.0.2
- checksum: 3c6a5fba05c4c6892cd3a9f66196ea8867087b77a5aa1a3f6cd349c785c3f1ca24abfd454664983aed1a165cab7846688e44fe8630652d666ba326b08625bc3d
- languageName: node
- linkType: hard
-
"jest-util@npm:^27.2.0":
version: 27.5.1
resolution: "jest-util@npm:27.5.1"
@@ -30282,7 +29602,7 @@ __metadata:
languageName: node
linkType: hard
-"jest-worker@npm:^26.5.0, jest-worker@npm:^26.6.2":
+"jest-worker@npm:^26.5.0":
version: 26.6.2
resolution: "jest-worker@npm:26.6.2"
dependencies:
@@ -33391,7 +32711,7 @@ __metadata:
languageName: node
linkType: hard
-"minimist@npm:^1.1.0, minimist@npm:^1.1.1, minimist@npm:^1.2.0":
+"minimist@npm:^1.1.0, minimist@npm:^1.2.0":
version: 1.2.0
resolution: "minimist@npm:1.2.0"
checksum: 72473f0fce6692cf1e134dfdccfcfddd64d354d465dac3e43053e0c6d398eb9684c9d964f666e3c1be93829de47cb1ddf3cd26d4071322ed25fbaa625441dd85
@@ -34612,15 +33932,6 @@ __metadata:
languageName: node
linkType: hard
-"npm-run-path@npm:^2.0.0":
- version: 2.0.2
- resolution: "npm-run-path@npm:2.0.2"
- dependencies:
- path-key: ^2.0.0
- checksum: acd5ad81648ba4588ba5a8effb1d98d2b339d31be16826a118d50f182a134ac523172101b82eab1d01cb4c2ba358e857d54cfafd8163a1ffe7bd52100b741125
- languageName: node
- linkType: hard
-
"npm-run-path@npm:^4.0.0, npm-run-path@npm:^4.0.1":
version: 4.0.1
resolution: "npm-run-path@npm:4.0.1"
@@ -35809,7 +35120,7 @@ __metadata:
languageName: node
linkType: hard
-"path-key@npm:^2.0.0, path-key@npm:^2.0.1":
+"path-key@npm:^2.0.1":
version: 2.0.1
resolution: "path-key@npm:2.0.1"
checksum: f7ab0ad42fe3fb8c7f11d0c4f849871e28fbd8e1add65c370e422512fc5887097b9cf34d09c1747d45c942a8c1e26468d6356e2df3f740bf177ab8ca7301ebfd
@@ -36258,7 +35569,7 @@ __metadata:
languageName: node
linkType: hard
-"pirates@npm:^4.0.0, pirates@npm:^4.0.1":
+"pirates@npm:^4.0.0":
version: 4.0.1
resolution: "pirates@npm:4.0.1"
dependencies:
@@ -37064,7 +36375,7 @@ __metadata:
languageName: node
linkType: hard
-"prop-types@npm:*, prop-types@npm:^15.0.0, prop-types@npm:^15.5.10, prop-types@npm:^15.8.0, prop-types@npm:^15.8.1":
+"prop-types@npm:*, prop-types@npm:^15.5.10, prop-types@npm:^15.8.0, prop-types@npm:^15.8.1":
version: 15.8.1
resolution: "prop-types@npm:15.8.1"
dependencies:
@@ -37896,20 +37207,6 @@ __metadata:
languageName: node
linkType: hard
-"react-element-to-jsx-string@npm:^14.3.2":
- version: 14.3.4
- resolution: "react-element-to-jsx-string@npm:14.3.4"
- dependencies:
- "@base2/pretty-print-object": 1.0.1
- is-plain-object: 5.0.0
- react-is: 17.0.2
- peerDependencies:
- react: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1
- react-dom: ^0.14.8 || ^15.0.1 || ^16.0.0 || ^17.0.1
- checksum: 42bcd4423f12e9ee21b2d3f0c2a28805ff4953bd82b6be4c1f5b5f9a371115aafa36a6f3d82726d43b4912179b79e99550c2b9a772c7fe6a5cd8f7e93ff34ceb
- languageName: node
- linkType: hard
-
"react-element-to-jsx-string@npm:^15.0.0":
version: 15.0.0
resolution: "react-element-to-jsx-string@npm:15.0.0"
@@ -38026,19 +37323,6 @@ __metadata:
languageName: node
linkType: hard
-"react-inspector@npm:^5.1.0":
- version: 5.1.1
- resolution: "react-inspector@npm:5.1.1"
- dependencies:
- "@babel/runtime": ^7.0.0
- is-dom: ^1.0.0
- prop-types: ^15.0.0
- peerDependencies:
- react: ^16.8.4 || ^17.0.0
- checksum: ca9e4c1fedb94e4e956dd3142838c5a25a9d61375aee5e8a74dd623bae09a263098a93f220e8d84c7fd39e569e1fa4297d363ddbc91b15bca91baeb7281d7f4f
- languageName: node
- linkType: hard
-
"react-inspector@npm:^6.0.0":
version: 6.0.2
resolution: "react-inspector@npm:6.0.2"
@@ -38048,13 +37332,6 @@ __metadata:
languageName: node
linkType: hard
-"react-is@npm:17.0.2, react-is@npm:^17.0.1, react-is@npm:^17.0.2":
- version: 17.0.2
- resolution: "react-is@npm:17.0.2"
- checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
- languageName: node
- linkType: hard
-
"react-is@npm:18.1.0":
version: 18.1.0
resolution: "react-is@npm:18.1.0"
@@ -38090,6 +37367,13 @@ __metadata:
languageName: node
linkType: hard
+"react-is@npm:^17.0.1, react-is@npm:^17.0.2":
+ version: 17.0.2
+ resolution: "react-is@npm:17.0.2"
+ checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8
+ languageName: node
+ linkType: hard
+
"react-leaflet@npm:^3.2.1":
version: 3.2.1
resolution: "react-leaflet@npm:3.2.1"
@@ -40256,13 +39540,6 @@ __metadata:
languageName: node
linkType: hard
-"rsvp@npm:^4.8.4":
- version: 4.8.5
- resolution: "rsvp@npm:4.8.5"
- checksum: 2d8ef30d8febdf05bdf856ccca38001ae3647e41835ca196bc1225333f79b94ae44def733121ca549ccc36209c9b689f6586905e2a043873262609744da8efc1
- languageName: node
- linkType: hard
-
"run-async@npm:^2.4.0":
version: 2.4.1
resolution: "run-async@npm:2.4.1"
@@ -40424,25 +39701,6 @@ __metadata:
languageName: node
linkType: hard
-"sane@npm:^4.0.3":
- version: 4.1.0
- resolution: "sane@npm:4.1.0"
- dependencies:
- "@cnakazawa/watch": ^1.0.3
- anymatch: ^2.0.0
- capture-exit: ^2.0.0
- exec-sh: ^0.3.2
- execa: ^1.0.0
- fb-watchman: ^2.0.0
- micromatch: ^3.1.4
- minimist: ^1.1.1
- walker: ~1.0.5
- bin:
- sane: ./src/cli.js
- checksum: 97716502d456c0d38670a902a4ea943d196dcdf998d1e40532d8f3e24e25d7eddfd4c3579025a1eee8eac09a48dfd05fba61a2156c56704e7feaa450eb249f7c
- languageName: node
- linkType: hard
-
"sanitize-filename@npm:^1.6.3":
version: 1.6.3
resolution: "sanitize-filename@npm:1.6.3"
@@ -41763,22 +41021,6 @@ __metadata:
languageName: node
linkType: hard
-"storybook-addon-outline@npm:^1.4.1":
- version: 1.4.2
- resolution: "storybook-addon-outline@npm:1.4.2"
- dependencies:
- "@storybook/addons": ~6.3.0
- "@storybook/api": ~6.3.0
- "@storybook/components": ~6.3.0
- "@storybook/core-events": ~6.3.0
- ts-dedent: ^2.1.1
- peerDependencies:
- react: ^16.8.0 || ^17.0.0
- react-dom: ^16.8.0 || ^17.0.0
- checksum: 8af1cfb486d03a3b269b84e263df56470012d44724f46ea42963229f4df26f0d2bf5a78f7a171f25760eb63911cf2e6c95637e80b5ff4b08e408e5680d682f8d
- languageName: node
- linkType: hard
-
"storybook@npm:^7.0.18":
version: 7.1.0
resolution: "storybook@npm:7.1.0"
@@ -42267,13 +41509,6 @@ __metadata:
languageName: node
linkType: hard
-"strip-eof@npm:^1.0.0":
- version: 1.0.0
- resolution: "strip-eof@npm:1.0.0"
- checksum: 40bc8ddd7e072f8ba0c2d6d05267b4e0a4800898c3435b5fb5f5a21e6e47dfaff18467e7aa0d1844bb5d6274c3097246595841fbfeb317e541974ee992cac506
- languageName: node
- linkType: hard
-
"strip-final-newline@npm:^2.0.0":
version: 2.0.0
resolution: "strip-final-newline@npm:2.0.0"
@@ -43228,7 +42463,7 @@ __metadata:
languageName: node
linkType: hard
-"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.1.1, ts-dedent@npm:^2.2.0":
+"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
version: 2.2.0
resolution: "ts-dedent@npm:2.2.0"
checksum: 93ed8f7878b6d5ed3c08d99b740010eede6bccfe64bce61c5a4da06a2c17d6ddbb80a8c49c2d15251de7594a4f93ffa21dd10e7be75ef66a4dc9951b4a94e2af
@@ -44598,13 +43833,6 @@ __metadata:
languageName: node
linkType: hard
-"uuid-browser@npm:^3.1.0":
- version: 3.1.0
- resolution: "uuid-browser@npm:3.1.0"
- checksum: 951ec47593865c7cc746df671f7b0f0ff48fcab583fcdaeab6c517a5222af0f5e144a6fcea5fa9620a5b3be047e2f9412a80267ea5c45050e07d51774197d49e
- languageName: node
- linkType: hard
-
"uuid@npm:3.3.2":
version: 3.3.2
resolution: "uuid@npm:3.3.2"
@@ -44933,7 +44161,7 @@ __metadata:
languageName: node
linkType: hard
-"walker@npm:^1.0.7, walker@npm:~1.0.5":
+"walker@npm:^1.0.7":
version: 1.0.7
resolution: "walker@npm:1.0.7"
dependencies:
From 6dd3c8c9770d523391dc665dbf062690750d8cca Mon Sep 17 00:00:00 2001
From: alexd-bes <129009580+alexd-bes@users.noreply.github.com>
Date: Fri, 6 Sep 2024 11:36:16 +1200
Subject: [PATCH 2/2] Fix tests
---
packages/ui-components/babel.test.js | 42 ++++++
.../{AppProviders.js => AppProviders.tsx} | 18 +--
...testingRenderer.js => testingRenderer.tsx} | 4 +-
packages/ui-components/jest.config.js | 6 +-
...icker.test.js => DateRangePicker.test.jsx} | 0
...ete.test.js => AsyncAutocomplete.test.jsx} | 0
...complete.test.js => Autocomplete.test.jsx} | 0
...iner.test.js => LoadingContainer.test.jsx} | 0
...leTable.test.js => EditableTable.test.jsx} | 0
.../{Toast.test.js => Toast.test.jsx} | 0
...erMessage.test.js => UserMessage.test.jsx} | 0
.../stories/iconbutton.stories.jsx | 2 +-
.../stories/story-utils/theme/darkTheme.js | 29 ++++
.../stories/story-utils/theme/index.js | 6 +
.../stories/story-utils/theme/lightTheme.js | 129 ++++++++++++++++++
.../stories/tables/dataGrid.stories.jsx | 2 +-
.../stories/tables/editableTable.stories.jsx | 2 +-
.../tables/expandableTable.stories.jsx | 2 +-
.../stories/tables/table.stories.jsx | 2 +-
packages/ui-components/tsconfig.json | 4 +-
20 files changed, 225 insertions(+), 23 deletions(-)
create mode 100644 packages/ui-components/babel.test.js
rename packages/ui-components/helpers/{AppProviders.js => AppProviders.tsx} (73%)
rename packages/ui-components/helpers/{testingRenderer.js => testingRenderer.tsx} (78%)
rename packages/ui-components/src/__tests__/components/DateRangePicker/{DateRangePicker.test.js => DateRangePicker.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/Inputs/{AsyncAutocomplete.test.js => AsyncAutocomplete.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/Inputs/{Autocomplete.test.js => Autocomplete.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/{LoadingContainer.test.js => LoadingContainer.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/Table/{EditableTable.test.js => EditableTable.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/{Toast.test.js => Toast.test.jsx} (100%)
rename packages/ui-components/src/__tests__/components/UserMessage/{UserMessage.test.js => UserMessage.test.jsx} (100%)
create mode 100644 packages/ui-components/stories/story-utils/theme/darkTheme.js
create mode 100644 packages/ui-components/stories/story-utils/theme/index.js
create mode 100644 packages/ui-components/stories/story-utils/theme/lightTheme.js
diff --git a/packages/ui-components/babel.test.js b/packages/ui-components/babel.test.js
new file mode 100644
index 0000000000..d4594c8d00
--- /dev/null
+++ b/packages/ui-components/babel.test.js
@@ -0,0 +1,42 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2024 Beyond Essential Systems Pty Ltd
+ */
+
+const isTest = process.env.NODE_ENV === 'test';
+
+module.exports = {
+ presets: [
+ [
+ '@babel/preset-env',
+ {
+ targets: {
+ node: 'current',
+ },
+ modules: isTest ? 'commonjs' : false,
+ },
+ ],
+ '@babel/preset-react',
+ ],
+ plugins: [
+ '@babel/plugin-proposal-object-rest-spread',
+ [
+ '@babel/plugin-proposal-class-properties',
+ {
+ loose: true,
+ },
+ ],
+ [
+ '@babel/plugin-proposal-private-property-in-object',
+ {
+ loose: true,
+ },
+ ],
+ [
+ '@babel/plugin-proposal-private-methods',
+ {
+ loose: true,
+ },
+ ],
+ ],
+};
diff --git a/packages/ui-components/helpers/AppProviders.js b/packages/ui-components/helpers/AppProviders.tsx
similarity index 73%
rename from packages/ui-components/helpers/AppProviders.js
rename to packages/ui-components/helpers/AppProviders.tsx
index 276eb96bb8..a7fc094b99 100644
--- a/packages/ui-components/helpers/AppProviders.js
+++ b/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 (
@@ -23,12 +28,3 @@ export const AppProviders = ({ params, children }) => {
);
};
-
-AppProviders.propTypes = {
- params: PropTypes.object,
- children: PropTypes.any.isRequired,
-};
-
-AppProviders.defaultProps = {
- params: null,
-};
diff --git a/packages/ui-components/helpers/testingRenderer.js b/packages/ui-components/helpers/testingRenderer.tsx
similarity index 78%
rename from packages/ui-components/helpers/testingRenderer.js
rename to packages/ui-components/helpers/testingRenderer.tsx
index 7dad01d778..f6c9b02676 100644
--- a/packages/ui-components/helpers/testingRenderer.js
+++ b/packages/ui-components/helpers/testingRenderer.tsx
@@ -2,12 +2,12 @@
* Tupaia
* Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
*/
-import React from 'react';
+import React, { ReactNode } from 'react';
import '@testing-library/jest-dom';
import { render } from '@testing-library/react';
import { AppProviders } from './AppProviders';
-const customRender = ui => {
+const customRender = (ui: ReactNode) => {
return render({ui});
};
diff --git a/packages/ui-components/jest.config.js b/packages/ui-components/jest.config.js
index c7d9ab0299..97fd70a8ad 100644
--- a/packages/ui-components/jest.config.js
+++ b/packages/ui-components/jest.config.js
@@ -7,7 +7,7 @@ const baseConfig = require('../../jest.config-ts.json');
module.exports = {
...baseConfig,
rootDir: '.',
- moduleDirectories: ['node_modules', 'helpers'],
+ moduleDirectories: ['node_modules'],
collectCoverageFrom: ['**/src/components/**/**'],
testMatch: ['/src/__tests__/**/**.test.**'],
// handle static assets @see https://jestjs.io/docs/webpack#handling-static-assets
@@ -18,8 +18,8 @@ module.exports = {
},
transform: {
'^.+\\.tsx?$': 'ts-jest',
- '^.+\\.js$': 'babel-jest',
- "^.+\\.jsx?$": "../../jestTransformer.js"
+ '^.+\\.js$': ['babel-jest', { configFile: './babel.test.js' }],
+ '^.+\\.jsx?$': '../../jestTransformer.js',
},
testTimeout: 30 * 1000, // 30 seconds. Needed for CI as some test take a while if CPU has high load
};
diff --git a/packages/ui-components/src/__tests__/components/DateRangePicker/DateRangePicker.test.js b/packages/ui-components/src/__tests__/components/DateRangePicker/DateRangePicker.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/DateRangePicker/DateRangePicker.test.js
rename to packages/ui-components/src/__tests__/components/DateRangePicker/DateRangePicker.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/Inputs/AsyncAutocomplete.test.js b/packages/ui-components/src/__tests__/components/Inputs/AsyncAutocomplete.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/Inputs/AsyncAutocomplete.test.js
rename to packages/ui-components/src/__tests__/components/Inputs/AsyncAutocomplete.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/Inputs/Autocomplete.test.js b/packages/ui-components/src/__tests__/components/Inputs/Autocomplete.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/Inputs/Autocomplete.test.js
rename to packages/ui-components/src/__tests__/components/Inputs/Autocomplete.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/LoadingContainer.test.js b/packages/ui-components/src/__tests__/components/LoadingContainer.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/LoadingContainer.test.js
rename to packages/ui-components/src/__tests__/components/LoadingContainer.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/Table/EditableTable.test.js b/packages/ui-components/src/__tests__/components/Table/EditableTable.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/Table/EditableTable.test.js
rename to packages/ui-components/src/__tests__/components/Table/EditableTable.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/Toast.test.js b/packages/ui-components/src/__tests__/components/Toast.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/Toast.test.js
rename to packages/ui-components/src/__tests__/components/Toast.test.jsx
diff --git a/packages/ui-components/src/__tests__/components/UserMessage/UserMessage.test.js b/packages/ui-components/src/__tests__/components/UserMessage/UserMessage.test.jsx
similarity index 100%
rename from packages/ui-components/src/__tests__/components/UserMessage/UserMessage.test.js
rename to packages/ui-components/src/__tests__/components/UserMessage/UserMessage.test.jsx
diff --git a/packages/ui-components/stories/iconbutton.stories.jsx b/packages/ui-components/stories/iconbutton.stories.jsx
index f030d667bb..4964f30450 100644
--- a/packages/ui-components/stories/iconbutton.stories.jsx
+++ b/packages/ui-components/stories/iconbutton.stories.jsx
@@ -51,4 +51,4 @@ LightArrows.story = {
parameters: {
backgrounds: [{ name: 'Header', value: COLORS.BLUE, default: true }],
},
-};
\ No newline at end of file
+};
diff --git a/packages/ui-components/stories/story-utils/theme/darkTheme.js b/packages/ui-components/stories/story-utils/theme/darkTheme.js
new file mode 100644
index 0000000000..5c77c93771
--- /dev/null
+++ b/packages/ui-components/stories/story-utils/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',
+ },
+ },
+});
diff --git a/packages/ui-components/stories/story-utils/theme/index.js b/packages/ui-components/stories/story-utils/theme/index.js
new file mode 100644
index 0000000000..2f77229134
--- /dev/null
+++ b/packages/ui-components/stories/story-utils/theme/index.js
@@ -0,0 +1,6 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ */
+export * from './darkTheme';
+export * from './lightTheme';
diff --git a/packages/ui-components/stories/story-utils/theme/lightTheme.js b/packages/ui-components/stories/story-utils/theme/lightTheme.js
new file mode 100644
index 0000000000..9082fbec0e
--- /dev/null
+++ b/packages/ui-components/stories/story-utils/theme/lightTheme.js
@@ -0,0 +1,129 @@
+/*
+ * Tupaia
+ * Copyright (c) 2017 - 2020 Beyond Essential Systems Pty Ltd
+ *
+ */
+
+import { createMuiTheme } from '@material-ui/core/styles';
+import * as COLORS from './colors';
+
+const themeName = 'Tupaia-Storybook';
+const palette = {
+ type: 'light',
+ primary: {
+ main: COLORS.BLUE,
+ light: COLORS.LIGHT_BLUE,
+ },
+ secondary: {
+ main: COLORS.DARK_BLUE,
+ light: COLORS.LIGHT_BLUE,
+ },
+ error: {
+ main: COLORS.RED,
+ light: COLORS.LIGHT_RED,
+ },
+ warning: {
+ main: COLORS.RED,
+ light: COLORS.LIGHT_RED,
+ },
+ success: {
+ main: COLORS.GREEN,
+ dark: COLORS.DARK_GREEN,
+ },
+ text: {
+ primary: COLORS.TEXT_DARKGREY,
+ secondary: COLORS.TEXT_MIDGREY,
+ tertiary: COLORS.TEXT_LIGHTGREY,
+ },
+ contrastText: COLORS.TEXT_MIDGREY,
+ grey: {
+ 100: COLORS.GREY_FB,
+ 200: COLORS.GREY_F1,
+ 300: COLORS.GREY_E2,
+ 400: COLORS.GREY_DE,
+ 500: COLORS.GREY_9F,
+ 600: COLORS.GREY_72,
+ },
+ background: {
+ default: COLORS.WHITE,
+ paper: COLORS.WHITE,
+ },
+ form: {
+ border: COLORS.GREY_DE,
+ },
+};
+const typography = {
+ h1: {
+ fontSize: '3.125rem',
+ fontWeight: 500,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ h2: {
+ fontSize: '2rem',
+ fontWeight: 600,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ h3: {
+ fontSize: '1.5rem',
+ fontWeight: 600,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ h4: {
+ fontSize: '1.3125rem',
+ fontWeight: 600,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ h5: {
+ fontSize: '1.3125rem',
+ fontWeight: 500,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ h6: {
+ fontSize: '1.125rem',
+ fontWeight: 500,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ subtitle1: {
+ fontSize: '1.125rem',
+ fontWeight: 500,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ subtitle2: {
+ fontSize: '0.8125rem',
+ fontWeight: 600,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ body1: {
+ fontSize: '0.9375rem',
+ fontWeight: 400,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ body2: {
+ fontSize: '0.875rem',
+ fontWeight: 400,
+ lineHeight: 1.18,
+ letterSpacing: 0,
+ },
+ button: {
+ textTransform: 'none',
+ letterSpacing: '0.035em',
+ },
+};
+const shape = { borderRadius: 3 };
+const overrides = {
+ MuiCard: {
+ root: {
+ borderColor: COLORS.GREY_DE,
+ },
+ },
+};
+export const lightTheme = createMuiTheme({ palette, themeName, typography, shape, overrides });
diff --git a/packages/ui-components/stories/tables/dataGrid.stories.jsx b/packages/ui-components/stories/tables/dataGrid.stories.jsx
index aa4e20bcbe..4ce73f8b9c 100644
--- a/packages/ui-components/stories/tables/dataGrid.stories.jsx
+++ b/packages/ui-components/stories/tables/dataGrid.stories.jsx
@@ -5,7 +5,7 @@
import React from 'react';
import styled from 'styled-components';
-import * as COLORS from '../story-utils/theme/colors';
+import * as COLORS from '.../helpers/theme/colors';
import { DataGrid } from '../../src/components';
export default {
diff --git a/packages/ui-components/stories/tables/editableTable.stories.jsx b/packages/ui-components/stories/tables/editableTable.stories.jsx
index 985bb0ff9b..7218f261c6 100644
--- a/packages/ui-components/stories/tables/editableTable.stories.jsx
+++ b/packages/ui-components/stories/tables/editableTable.stories.jsx
@@ -8,7 +8,7 @@ import PropTypes from 'prop-types';
import styled from 'styled-components';
import MuiLink from '@material-ui/core/Link';
import Typography from '@material-ui/core/Typography';
-import * as COLORS from '../story-utils/theme/colors';
+import * as COLORS from '.../helpers/theme/colors';
import { useTableData } from '../../helpers/useTableData';
import {
Button,
diff --git a/packages/ui-components/stories/tables/expandableTable.stories.jsx b/packages/ui-components/stories/tables/expandableTable.stories.jsx
index 774e4305e3..cdeac0013e 100644
--- a/packages/ui-components/stories/tables/expandableTable.stories.jsx
+++ b/packages/ui-components/stories/tables/expandableTable.stories.jsx
@@ -16,7 +16,7 @@ import {
CondensedTableBody,
} from '../../src/components';
import { useTableData } from '../../helpers/useTableData';
-import * as COLORS from '../story-utils/theme/colors';
+import * as COLORS from '.../helpers/theme/colors';
export default {
title: 'Tables/ExpandableTable',
diff --git a/packages/ui-components/stories/tables/table.stories.jsx b/packages/ui-components/stories/tables/table.stories.jsx
index caa627096b..f02e2eb405 100644
--- a/packages/ui-components/stories/tables/table.stories.jsx
+++ b/packages/ui-components/stories/tables/table.stories.jsx
@@ -5,7 +5,7 @@
import React, { useState } from 'react';
import styled from 'styled-components';
-import * as COLORS from '../story-utils/theme/colors';
+import * as COLORS from '.../helpers/theme/colors';
import { Table, LoadingContainer } from '../../src/components';
import { useTableData } from '../../helpers/useTableData';
diff --git a/packages/ui-components/tsconfig.json b/packages/ui-components/tsconfig.json
index db999d5910..f0e3136ea5 100644
--- a/packages/ui-components/tsconfig.json
+++ b/packages/ui-components/tsconfig.json
@@ -17,8 +17,8 @@
"include": [
"src/**/*",
"jest.config.ts",
- "helpers/**/*",
- "stories/**/*",
+ "helpers",
+ "stories",
".storybook"
]
}