Waitp 1259 map components to ts

.eslintrc

@@ -228,7 +228,12 @@
         "packages/ui-map-components/**"
       ],
       "rules": {
-        "import/no-extraneous-dependencies": "off"
+        "import/no-extraneous-dependencies": "off",
+        "react/prop-types": "off",
+        "import/no-unresolved": 0, // Turn off linting error for imports
+        "import/extensions": 0, // Turn off linting error for imports
+        "react/require-default-props": "off",
+        "no-bitwise": "off" // Turn off linting error for bitwise operators because of generic style types using '>>'
       }
     },
     {

packages/lesmis/package.json

@@ -24,8 +24,9 @@
     "start-lesmis-server": "yarn workspace @tupaia/lesmis-server start-dev",
     "test": "yarn package:test",
     "start-ui-components": "yarn workspace @tupaia/ui-components build -w",
+    "start-ui-map-components": "yarn workspace @tupaia/ui-map-components build -w",
     "start-ui-chart-components": "yarn workspace @tupaia/ui-chart-components build -w",
-    "start-frontend": "npm-run-all -c -l -p start-ui-components start-ui-chart-components start-dev",
+    "start-frontend": "npm-run-all -c -l -p start-ui-components start-ui-chart-components start-ui-map-components start-dev",
     "start-servers": "npm-run-all -c -l -p start-central-server start-entity-server start-report-server start-web-config-server start-lesmis-server"
   },
   "browserslist": [

packages/ui-components/package.json

@@ -55,10 +55,10 @@
     "@storybook/react": "^6.3.9",
     "@types/jest": "^29.5.1",
     "@types/lodash.throttle": "^4.1.7",
-    "@types/react-dom": "^18.2.4",
+    "@types/react-dom": "^16.9.18",
     "@types/react-router-dom": "^5.3.3",
     "@types/react-table": "^7.7.14",
-    "@types/styled-components": "^5.1.26",
+    "@types/styled-components": "^5.0.0",
     "faker": "^4.1.0",
     "fast-glob": "^3.2.5",
     "react-docgen-typescript-plugin": "^1.0.5",

packages/ui-components/src/components/ReferenceTooltip.tsx

@@ -46,13 +46,13 @@ const StyledToolTip = withStyles(theme => ({
   },
 }))(Tooltip);
 
-interface Reference {
+export interface ReferenceProps {
   text?: string;
   name?: string;
   link?: string;
 }
 
-const Content = ({ text = '', name = '', link = '' }: Reference) => {
+const Content = ({ text = '', name = '', link = '' }: ReferenceProps) => {
   if (text) {
     return (
       <TextCaption variant="caption">
@@ -72,7 +72,7 @@ const Content = ({ text = '', name = '', link = '' }: Reference) => {
 
 interface ReferenceTooltipProps {
   iconStyleOption?: string;
-  reference?: Reference;
+  reference?: ReferenceProps;
 }
 
 export const ReferenceTooltip = ({

packages/ui-map-components/.storybook/main.js

@@ -2,4 +2,7 @@
 module.exports = {
   stories: ['../stories/**/*.stories.js'],
   addons: ['@storybook/addon-essentials'],
+  typescript: {
+    reactDocgen: 'react-docgen-typescript-plugin',
+  },
 };

packages/ui-map-components/jest.config.js

@@ -2,16 +2,23 @@
  * Tupaia
  * Copyright (c) 2017 - 2023 Beyond Essential Systems Pty Ltd
  */
+const baseConfig = require('../../jest.config-ts.json');
 
 module.exports = {
-  moduleDirectories: ['node_modules'],
-  collectCoverageFrom: ['**/src/components/**/*.js'],
+  ...baseConfig,
+  rootDir: '.',
+  moduleDirectories: ['node_modules', 'helpers'],
+  collectCoverageFrom: ['**/src/**/**'],
+  testMatch: ['<rootDir>/src/__tests__/**/**.test.**'],
   // handle static assets @see https://jestjs.io/docs/webpack#handling-static-assets
   moduleNameMapper: {
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|css)$':
       '<rootDir>/jestFileMock.js',
     '^file-loader': '<rootDir>/jestFileMock.js',
   },
-  transformIgnorePatterns: ['/node_modules/'],
+  transform: {
+    '^.+\\.tsx?$': 'ts-jest',
+    '^.+\\.js$': 'babel-jest',
+  },
   testTimeout: 30 * 1000, // 30 seconds. Needed for CI as some test take a while if CPU has high load
 };

packages/ui-map-components/package.json

@@ -11,16 +11,16 @@
     "author": "Beyond Essential Systems <admin@tupaia.org> (https://beyondessential.com.au)",
     "source": "src/index.js",
     "main": "dist/index.js",
+    "types": "dist/index.d.ts",
     "scripts": {
-        "build": "rm -rf dist && npm run --prefix ../../ package:build:js",
+        "build": "rm -rf dist && yarn package:build:ts",
         "build-dev": "npm run build",
         "lint": "yarn package:lint:js",
         "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",
-        "build-dev:watch": "yarn run package:build:js -w"
+        "test:watch": "yarn test --watch"
     },
     "dependencies": {
         "@material-ui/core": "^4.9.8",
@@ -38,6 +38,12 @@
     },
     "devDependencies": {
         "@material-ui/styles": "^4.9.10",
-        "@storybook/react": "^6.3.9"
+        "@mui/types": "^7.2.4",
+        "@storybook/react": "^6.3.9",
+        "@types/jest": "^29.5.1",
+        "@types/leaflet": "^1.7.1",
+        "@types/react-dom": "^16.9.18",
+        "@types/styled-components": "^5.1.26",
+        "react-docgen-typescript-plugin": "^1.0.5"
     }
 }

packages/ui-map-components/src/components/ActivePolygon.js → packages/ui-map-components/src/components/ActivePolygon.tsx

@@ -4,14 +4,19 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
-import { Polygon } from 'react-leaflet';
+import { Polygon, PolygonProps as LeafletPolygonProps } from 'react-leaflet';
 import styled from 'styled-components';
 import { MAP_COLORS } from '../constants';
 
 const { POLYGON_HIGHLIGHT } = MAP_COLORS;
 
-const StyledPolygon = styled(Polygon)`
+interface PolygonProps {
+  shade?: string;
+  hasChildren?: boolean;
+  hasShadedChildren?: boolean;
+}
+
+const StyledPolygon = styled(Polygon)<PolygonProps>`
   stroke: ${props => props.shade || POLYGON_HIGHLIGHT};
   opacity: 1;
   fill: ${props => props.shade || 'none'};
@@ -27,7 +32,15 @@ const StyledPolygon = styled(Polygon)`
 /**
  * ActivePolygon: The polygon that is selected on the map. This handles the style logic
  */
-const ActivePolygon = ({ coordinates, shade, hasChildren, hasShadedChildren }) => (
+interface ActivePolygonProps extends PolygonProps {
+  coordinates: LeafletPolygonProps['positions'];
+}
+const ActivePolygon = ({
+  coordinates,
+  shade,
+  hasChildren = false,
+  hasShadedChildren = false,
+}: ActivePolygonProps) => (
   <StyledPolygon
     positions={coordinates}
     shade={shade}
@@ -36,19 +49,4 @@ const ActivePolygon = ({ coordinates, shade, hasChildren, hasShadedChildren }) =
   />
 );
 
-ActivePolygon.propTypes = {
-  coordinates: PropTypes.arrayOf(
-    PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.arrayOf(PropTypes.number))),
-  ).isRequired,
-  shade: PropTypes.string,
-  hasChildren: PropTypes.bool,
-  hasShadedChildren: PropTypes.bool,
-};
-
-ActivePolygon.defaultProps = {
-  shade: null,
-  hasChildren: false,
-  hasShadedChildren: false,
-};
-
 export default ActivePolygon;

packages/ui-map-components/src/components/AreaTooltip.js → packages/ui-map-components/src/components/AreaTooltip.tsx

@@ -5,12 +5,14 @@
  */
 
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Tooltip } from 'react-leaflet';
 import styled from 'styled-components';
 import { PopupDataItemList } from './PopupDataItemList';
+import { MeasureData, Series } from '../types';
 
-const Heading = styled.span`
+const Heading = styled.span<{
+  hasMeasureValue: boolean;
+}>`
   text-align: center;
   font-weight: ${props => (props.hasMeasureValue ? 'bold' : 'normal')};
 `;
@@ -19,15 +21,25 @@ const Grid = styled.div`
   display: grid;
 `;
 
+interface AreaTooltipProps {
+  permanent?: boolean;
+  sticky?: boolean;
+  orgUnitName?: string;
+  hasMeasureValue?: boolean;
+  serieses?: Series[];
+  orgUnitMeasureData?: MeasureData;
+  text?: string;
+}
+
 export const AreaTooltip = ({
-  permanent,
-  sticky,
+  permanent = false,
+  sticky = false,
   orgUnitName,
-  hasMeasureValue,
-  serieses,
-  orgUnitMeasureData,
+  hasMeasureValue = false,
+  serieses = [],
+  orgUnitMeasureData = {} as MeasureData,
   text,
-}) => {
+}: AreaTooltipProps) => {
   return (
     <Tooltip
       pane="tooltipPane"
@@ -52,23 +64,3 @@ export const AreaTooltip = ({
     </Tooltip>
   );
 };
-
-AreaTooltip.propTypes = {
-  permanent: PropTypes.bool,
-  sticky: PropTypes.bool,
-  hasMeasureValue: PropTypes.bool,
-  serieses: PropTypes.arrayOf(PropTypes.object),
-  orgUnitMeasureData: PropTypes.object,
-  orgUnitName: PropTypes.string,
-  text: PropTypes.string,
-};
-
-AreaTooltip.defaultProps = {
-  permanent: false,
-  sticky: false,
-  hasMeasureValue: false,
-  serieses: [],
-  orgUnitMeasureData: {},
-  orgUnitName: null,
-  text: null,
-};

packages/ui-map-components/src/components/EntityPolygon.js → packages/ui-map-components/src/components/EntityPolygon.tsx

@@ -4,11 +4,11 @@
  *
  */
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Polygon as PolygonComponent } from 'react-leaflet';
 import styled from 'styled-components';
 import { blue } from '@material-ui/core/colors';
 import { AreaTooltip } from './AreaTooltip';
+import { Entity } from '../types';
 
 export const POLYGON_COLOR = '#EE6230';
 
@@ -23,7 +23,7 @@ const BasicPolygon = styled(PolygonComponent)`
   }
 `;
 
-export const EntityPolygon = ({ entity }) => {
+export const EntityPolygon = ({ entity }: { entity?: Entity }) => {
   if (!entity || !Array.isArray(entity.region)) {
     return null;
   }
@@ -36,14 +36,3 @@ export const EntityPolygon = ({ entity }) => {
     </BasicPolygon>
   );
 };
-
-EntityPolygon.propTypes = {
-  entity: PropTypes.shape({
-    name: PropTypes.string,
-    region: PropTypes.array,
-  }),
-};
-
-EntityPolygon.defaultProps = {
-  entity: null,
-};